nextJs eslint prettier

yarn

출처 : https://www.kenrhee.com/blog/eslint-and-prettier-for-nextjs

npx eslint --init 로 설정

ESLint와 Prettier를 함께 사용하기 위해서 다음과 같이 설치를 합니다.

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
 extends: [
    "eslint:recommended",
    "plugin:react/recommended",
      // 해당 플러그인의 권장 규칙을 사용합니다.
    "plugin:@typescript-eslint/recommended",   
    // plugin과 eslint-config-prettier 설정을 한번에 합니다.
    "plugin:prettier/recommended", 
    
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/no-unknown-property': [
      2,
      {
        ignore: ['jsx'],
      },
    ],
  },
};

.prettierrc.js

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 160,
  tabWidth: 2,
};

VS Code에서 자동으로 코드를 고치는 법

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "files.autoSave": "onFocusChange",
}