환경
macOS Mojave 10.14.6
vscode
node v10.16
CRA를 사용하지 않고 웹팩을 이용해서 빌드하려고 합니다.
- ESLint
자바스크립트용 Linter - Linter
소스코드 분석해 정해진 규칙 체크 - Formatting rules
* 한줄 최대길이, comma 스타일, ' or ", ... - Code-quality rules
* 콘솔로그를 허용할 것인지?, 사용되지 않은 변수, ...
Prettier는 뭘까요?
- 일관된 스타일 강요.
- 코드를 해석해서 규칙에 맞게 만듬
- Formatting rules만 체크할 수 있습니다.
익스텐션 설치
ES7 React/Redux/GraphQL/React-Native snippets
Prettier
ESLint
VSCode Extensions 설치
ESLint, Prettier 둘다 설치해줍니다.
레퍼런스 : 리액트 프로젝트에 ESLint 와 Prettier 끼얹기 - velopert
eslint는 airbnb를 따르겠습니다.
npm info "eslint-config-airbnb@latest" peerDependencies 명령을 통해
eslint-config-airbnb에 적합한 디펜던시들의 버전들 알려준답니다.
eslint-config-airbnb 설치
CRA v2 기준
yarn add eslint-config-airbnb
webpack으로 프로젝트 생성했을시엔
npx install-peerdeps --dev eslint-config-airbnb
npx는 어떻게 다른거죠?
https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm/52018825#52018825
ESLint 세부설정
ESLint 의 세부 설정은 package.json 파일의 eslintConfig 부분에서 설정 할 수 있습니다. (또는 .eslintrc 파일에서도 할 수 있습니다.)
ESlint 설정에서 browser 추가
만약에 eslint-airbnb-config 를 적용하셨다면, src/index.js 에서 document 를 사용하려고 하는 부분에서 아마 no-undef 라는 오류가 뜰 것입니다.
이를 방지하기 위해선, package.json 에서 eslintConfig 의 env 객체에 browser 값을 true 로 설정하셔야 합니다.
"eslintConfig": {
"extends": "airbnb",
"rules": {
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0
},
"env": {
"browser": true
}
},이렇게 하고 나면 document, window 등의 브라우저 내장 객체들을 조회 할 때도 ESLint 오류 없이 작업 할 수 있습니다.
.eslintrc.js로 설정
module.exports = {
parserOptions: {
ecmaVersion: 9
},
env: {
browser: true,
commonjs: true,
node: true,
jquery: true
},
extends: "airbnb-base",
plugins: ["import", "html"],
rules: {
// "off" or 0 - turn the rule off
// "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
// "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
"no-console": "warn",
quotes: ["error", "single"],
"no-underscore-dangle": "warn",
"no-plusplus": ["error", { allowForLoopAfterthoughts: true }],
"comma-dangle": ["error", "never"]
}
};package.json 에 eslintConfig로 설정
package.json 파일의 eslintConfig은 CRA v2버전에서만 존재하고요.
직접 만들어 주셔도 됩니다.
"eslintConfig": {
"parser": "babel-eslint",
"extends": [
"airbnb",
"prettier"
],
"rules": {
"react/sort-comp": 0,
"no-class-assign": 0,
"react/forbid-prop-types": 0
},
"env": {
"browser": true,
"node": true
}
}
레퍼런스 : Specifying Environments - ESLint
eslint 에러가 발생하는데 굳이 이걸 지켜야돼? 하는건 뺄 수 있습니다.
rules에 eslint 에러 문자열을 복붙하신 후에 value에
0 === "off"
1 === "warn"
2 === "error"
로 설정하시면 됩니다.
"react/sort-comp": 0
"react/sort-comp": "off레퍼런스 : Configuring Rules - ESLint
package.json 을 열어보시면 하단에 다음과 같은 코드가 있을텐데요:
"eslintConfig": {
"extends": "react-app"
},
여기에 있는 extends 부분을 이렇게 고치시면됩니다:
"eslintConfig": {
"extends": ["react-app", "airbnb"]
},ESLint도 트렌드가 있겠죠?
https://www.npmtrends.com/eslint-config-airbnb-vs-eslint-config-google-vs-standard
ESLint 의 세부 설정은 package.json 파일의 eslintConfig 부분에서 설정 할 수 있습니다. (또는 .eslintrc 파일에서도 할 수 있습니다.)
ESLint 설정파일은 .eslintrc, .eslintrc.js, .eslintrc.json 다 가능합니다.
https://eslint.org/docs/user-guide/configuring
.prettierrc
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}https://prettier.io/docs/en/options.html
eslint-config-prettier설치
yarn add -D eslint-config-prettiereslint-config-prettier: eslint도 formatting rules가 있어서, prettier와 충돌합니다.formatting rules는 prettier를 따라가는 것으로 알고있습니다.
eslint는 syntax 관련된 것들만 관리합니다.
package.json에도 적용해줍니다.
"eslintConfig": {
"extends": [
"airbnb",
"prettier" <-
],
"rules": {
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0
}
},