단계별로 ESLint를 React 프로젝트와 통합(자바스크립트)
3525 단어 reacteslintjavascript
npm i eslint --save-dev
ESLint 플러그인 설치
npx install-peerdeps --dev eslint-config-airbnb
참고: 단일 명령으로 6개의 플러그인을 설치합니다:
eslint-config-airbnb
, eslint-plugin-import
, eslint-plugin-react
, eslint-plugin-react-hooks
및 eslint-plugin-jsx-a11y
. 이러한 플러그인을 개별적으로 설치할 수도 있습니다.babel eslint 설치
npm i --save-dev babel-eslint
"devDependencies"는 다음과 유사해야 합니다.
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^7.2.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.0.0"
}
이제 프로젝트의 루트에 파일
.eslintrc.json
을 만듭니다. 구성 아래에 붙여넣기:{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
},
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"airbnb",
"airbnb/hooks",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
}
},
"plugins": [
"react",
"react-hooks"
],
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"react/display-name": 1
}
}
또한 VSCode용 ESLint extension을 설치한 후 적절한 Linting을 얻으려면 VSCode 창을 한 번 다시 로드해야 합니다.*
ESLint는 자동으로
.js
및 .jsx
파일에서 오류/경고를 감지하기 시작합니다. 그렇지 않은 경우 프로젝트에 Lint 오류가 없거나 ESLint가 제대로 설정되지 않은 것입니다. 린팅이 작동하는지 테스트하려면 폴더 경로(예: eslint src/**
)가 있는 터미널에서 eslint 명령을 실행하고 출력을 확인하세요.일부 파일/폴더의 린트를 비활성화하려면 프로젝트 루트에
.eslintignore
를 만들 수 있습니다..eslintignore
node_modules
dist
coverage
마지막으로 파이프라인 프로세스의 일부로
scripts
에서 package.json
에 린팅을 추가할 수도 있습니다."scripts": {
"lint": "eslint . --ext js,jsx",
"lint:fix": "eslint . --ext js,jsx --fix"
}
Reference
이 문제에 관하여(단계별로 ESLint를 React 프로젝트와 통합(자바스크립트)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/brayanarrieta/integrate-eslint-with-your-react-project-javascript-29p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)