**相关章节**
프런트엔드 사양 (1) ESlint 및 @antfu/eslint-config
프런트엔드 사양 (2) Prettier
프런트엔드 사양 (3) stylelint
프런트엔드 사양 (4) husky+lint-staged+commitizen+commitlint
ESlint
이 기사에서는 직장에서 eslint 관련 내용, 일반적으로 사용되는 구성, 플러그인 등에 대해 기록할 것입니다. 사양
은 팀 프로젝트에서 특히 중요합니다. 그렇지 않으면 코드를 병합할 때 많은 충돌이 발생합니다.
eslint 및 vscode 작업 공간을 효과적으로 사용할 수 있습니다. 팀 규범은 일관되게 유지됩니다.
@antfu/eslint-config 기본 구성(권장)
ESlint를 소개하기 전, Anthony Fu 의 오픈소스 프로젝트인 ESlint의 기본 구성 프로젝트 인 프로젝트를 추천하는데 , 이는 많은 구성을 절약할 수 있으며, Prettier에는 Anthony Fu가 적용되지 않는다는 점에 유의할 필요가 있습니다. 이 기사에 대한 아래의 상사 소개를 살펴보십시오.
내가 Prettier(antfu.me)를 사용하지 않는 이유
.eslintrc 및 package.json 파일에 다음 콘텐츠를 설치하고 유지하기만 하면 간단하고 빠릅니다.
[자세한 내용은 @antfu/eslint-config를 참조하세요.]( antfu/eslint-config: Anthony의 ESLint 구성 사전 설정(github.com) )
pnpm add -D eslint @antfu/eslint-config
{
"extends": "@antfu"
}
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
설치하다
vscode 플러그인 몰에서 직접 Eslint를 검색해 보세요. 코드 감지가 필요하기 때문에 프로젝트에서 npm을 사용하여 ESlint를 설치해야 한다는 점도 주목할 만합니다.
npm i eslint -D
초기화
초기화 과정에서 상호 작용이 발생하며 실제 프로젝트에 따라 선택할 수 있습니다. 상호 작용을 선택한 후 설치해야 하는 권장 npm 패키지가 표시됩니다.
npx eslint --init
초기화가 완료되면 .eslintrc.cjs 파일이 자동으로 생성됩니다.
module.exports = {
"env": {
"browser": true, // 支持浏览器环境的检测
"es2021": true, // 支持es2021语法的检测
"node": true // 支持node环境的检测
},
"extends": [
"eslint:recommended", // 使用eslint推荐的配置进行检测
"plugin:vue/vue3-essential", // 支持vue3相关语法的检测
'plugin:@typescript-eslint/recommended' //ts推荐进行配置
],
"overrides": [
],
'parser': 'vue-eslint-parser',
"parserOptions": {
"ecmaVersion": "latest", // 解析文件的时候使用最新的ecmaVersion
"sourceType": "module", // 文件是ES6模块规范
'parser': '@typescript-eslint/parser',
},
"plugins": [
"vue",
'@typescript-eslint'
],
"rules": {
// 配置自己项目特有的一些检测规则
quotes: ['error','single'] //单引号示例
}
}
vscode 작업 공간 설정
vscode 설정은 사용자 설정과 작업 공간 설정으로 그룹화됩니다. 사용자 설정은 전역적으로 적용되며 작업 공간은 현재 프로젝트에 유효합니다. 작업 공간 수준은 사용자 설정보다 높으며 저장이 활성화되면 코드 형식이 자동으로 지정됩니다.
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
}
package.json에 스크립트 추가
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
},
발 감지 스크립트 실행
npm run lint:eslint
Prettier와의 갈등 해결
어떤 분들은 두 번 포맷하고, eslint에서 한 번 포맷하고, Prettier에서 다시 포맷해준다고 하는데 왜 구성 항목이 두 개가 필요한 걸까요? 하나로 단순화하면 안 될까요? 실제로 커뮤니티에서도 VsCode에 의견을 주셨는데, 그리고 VsCode가 준 답변은 대략적으로 각자가 자신의 임무를 수행한다는 의미이므로 둘 다 유지하는 것이 좋습니다.
갈등 시나리오의 예
충돌 시나리오의 예를 들어보세요.
Eslint 구성 작은따옴표
Prettier는 큰따옴표를 구성합니다.
갈등 현상
Prettier의 규칙은 큰따옴표를 사용하기 때문에 두 가지가 동시에 존재할 경우 최종 형식 지정 결과는 Prettier의 규칙을 따릅니다. 즉, Eslint와 Prettier는 모두 파일 형식을 지정하지만 Prettier는 파일 형식을 지정합니다. . Eslint 형식을 덮어씁니다. 따라서 최종 형식화된 결과는 큰따옴표로 묶입니다.
해결책
eslint-plugin-prettier 및 eslint-config-prettier는 충돌 문제를 효과적으로 해결할 수 있습니다.
그 중 eslint-config-prettier는 Prettier와 충돌하는 Eslint의 규칙을 끄고, eslint-plugin-prettier는 Prettier의 규칙을 Eslint로 설정합니다. Prettier가 완성되고 병합 시 상충하는 규칙은 Prettier의 규칙에 따릅니다.
npm install -D eslint-plugin-prettier eslint-config-prettier