ddarkr/en-US.md

## en-US.md

      
    Raw
  

              en-US.md
            
          
    😉 Next.js: TypeScript + ESLint (@typescript-eslint) + Prettier Setup


📅 Write: 2020/02/03


✅ Before you follow this tutorial, create the Next.js project first.

1. Set up TypeScript at your project.

Check Next.js TypeScript Document
2. Install Dependencies

yarn add -D eslint eslint-config-prettier eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier
3. Make .eslintrc.js

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "react-app",
    "plugin:prettier/recommended"
  ],
  plugins: ["@typescript-eslint", "react"],
  rules: {}
};
4. Make .prettierrc


💡 If you have a Prettier setting that you used, you will be familiar with using that setting.

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": false,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}
5. Add lint command at package.json

"scripts": {
  ...
  "lint": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore ."
},
6. (Option) Set up VSCode

💡 This paragraph is a setting method for Visual Studio Code.


⬆️ Install ESLint extension


⬆️ Install Prettier extension


⬆️ Search format

✅ Turn on Format On Save
🔄 Set Default Formatter to esbenp.prettier-vscode


## ko-KR.md

      
    Raw
  

              ko-KR.md
            
          
    😉 Next.js: TypeScript + ESLint (@typescript-eslint) + Prettier 설정


📅 Write: 2020/02/03


✅ 해당 튜토리얼을 따라하시기 전에, Next.js 프로젝트를 먼저 생성하세요.

1. TypeScript 적용

공식 Next.js 'TypeScript' 메뉴얼을 따라하십시오.
2. 필요 패키지 설치

yarn add -D eslint eslint-config-prettier eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier
3. .eslintrc.js 설정

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "react-app",
    "plugin:prettier/recommended"
  ],
  plugins: ["@typescript-eslint", "react"],
  rules: {}
};
4. .prettierrc 설정


💡 기존에 사용하던 Prettier 설정이 있으시다면, 그 설정을 사용하시는 것이 익숙하실겁니다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": false,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}
5. package.json 에 Lint 명령어 추가

"scripts": {
  ...
  "lint": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore ."
},
6. (Option) Visual Studio Code 설정

💡 이 문단은 Visual Studio Code에서 저장 시 자동으로 Prettier를 이용하여 코드를 다듬어주는 기능을 설정하는 방법입니다.


⬆️ ESLint 확장기능 설치


⬆️ Prettier 확장기능 설치


⬆️ format 검색

✅ Format On Save 켜기
🔄 Default Formatter 를 esbenp.prettier-vscode 로 설정