Eslint Prettier

eslint

node

1. 설치

npm install eslint-plugin-import eslint-config-airbnb-base --save-dev

2. config 설정

.eslintrc

module.exports = {
    "parserOptions": {
        "ecmaVersion": 9
    },
    "extends": ["airbnb-base", "prettier"],
    "env": {
        "browser": true,
        "node": true,
    },
    "plugins": ['import', "prettier"],
    "rules": {
        "prettier/prettier": "error"
    }
};

.prettier

{  
  "singleQuote": true, // " " 대신 ' ' 를 사용
  "semi": true, // 문장 끝에는 ; 를 붙여줌
  "useTabs": false, // 탭을 누르면 tab이 안되고 스페이스 여러 칸이 들어감
  "tabWidth": 2, // 탭 간격을 스페이스 2칸으로 함
  "trailingComma": "all", // 객체의 마지막 요소 뒤에 , 를 붙여줌
  "printWidth": 80 // 한 줄의 길이가 80을 넘지 않도록 함
}

settings.json

{
    ...
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true
}

react

1. npm 패키지 설치

npm install --save-dev eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier prettier

2. config 설정 .eslintrc.js

   module.exports = { extends: ['react-app', 'airbnb', 'airbnb/hooks', 'prettier'], plugins: ['react', 'jsx-a11y', 'import', 'prettier'], rules: { 'react/jsx-one-expression-per-line': 0, 'react/jsx-filename-extension': 0, 'prettier/prettier': 'error', }, };

.prettier

{  
  "singleQuote": true, // " " 대신 ' ' 를 사용
  "semi": true, // 문장 끝에는 ; 를 붙여줌
  "useTabs": false, // 탭을 누르면 tab이 안되고 스페이스 여러 칸이 들어감
  "tabWidth": 2, // 탭 간격을 스페이스 2칸으로 함
  "trailingComma": "all", // 객체의 마지막 요소 뒤에 , 를 붙여줌
  "printWidth": 80 // 한 줄의 길이가 80을 넘지 않도록 함
}

settings.json

{
    ...
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true
}

** extends에 'react-app'이 있으면 .eslintrc.js 파일이 있는 곳을 root로 열어야지 에러가 안납니다.