Eslint/Prettier (CRA)

(만약 React로 개발할 경우 CRA(Create React App)으로 설치할 시 eslint는 자동으로 설치가 되어있다.)

eslint와 prettier 설치

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

 

.eslintrc

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    // "next" //NextJS
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "prettier"
  ],
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0
  },
  "globals": {
    "React": "writable"
  }
}

 

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

 

packages.json 추가

"eslintConfig": {
    "extends": [
      "prettier"
    ],
    "parser": "babel-eslint",
    "rules": {
      "react/prefer-stateless-function": 0,
      "react/jsx-filename-extension": 0,
      "react/jsx-one-expression-per-line": 0,
      "react/prop-types": 0
    },
    "env": {
      "browser": true
    }
  },