CRA 에 ESlint & prettier 적용 시키기

vs code 에 ESlint와 prettier 플러그인 설치한다.

npx create-react-app [프로젝트명]

 

ESLint 설치

npm i -D eslint

yarn add -D eslint

우선 npm을 통해 ESLint를 설치해준다.

 

 

.eslintrc.json 파일 설정

npx eslint --init

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest √ Would you like to install them now with npm? · No / Yes

 

 

이런식으로 설정해준다.

이번엔 에어비앤비 스타일로 설정해보았다.

 

 

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
      destructuring: true,
      spread: true,
      experimentalObjectRestSpread: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    'react/prop-types': 'off',
    'no-unused-vars': 1,
    'no-console': 0,
    'react/jsx-one-expression-per-line': 'off',
  },
};

 

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "destructuring": true,
      "spread": true,
      "experimentalObjectRestSpread": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/prop-types": "off",
    "no-unused-vars": 1,
    "no-console": 0,
    "react/jsx-one-expression-per-line": "off"
  }
}

 

---

Prettier 설치

npm통해 패키지를 설치해준다.

npm i -D prettier

yarn add -D prettier

그리고 충돌방지를 위해 플러그인을 설치해준다.

npm i -D eslint-config-prettier eslint-plugin-prettier

yarn add -D eslint-config-prettier eslint-plugin-prettier

 

 

.prettierrc.js

module.exports = {
    printWidth : 100,
    tabWitdh : 2,
    singleQuote : true,
    trailingComma : "all",
    semi : false,
    useTabs : false,
    arrowParens : "always",
    endOfLine : "auto",
    bracketSpacing : "true",
    jsxBracketSameLine: "true",
}

 

 

.prettierrc.json

{
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens" : "always",
  "endOfLine" : "auto",
  "bracketSpacing" : true,
  "jsxBracketSameLine": true
}

 

 

이렇게 해주었다..

 

 

 

참고 블로그

https://velog.io/@ggombee/eslint

ESLint/Prettier 적용 및 오류해결