当前位置：首页 > news >正文

vue项目使用eslint+prettier管理项目格式化

news 2025/6/24 15:04:51

代码格式化、规范化说明

使用eslint+prettier进行格式化，vscode中需要安装插件ESLint、Prettier - Code formatter，且格式化程序选择为后者（vue文件、js文件要分别设置）  
对于eslint规则，在格式化时不会全部自动调整，建议的处理方式为：   
1.手工按提示进行处理  
2.vsocode中在源码上右键---源代码操作--Fix all ESLint auto-fixable problems（主要包含attribute小写、顺序、js代码块顺序等）  
使用此方式要注意，有时会处理错误，建议先格式化一次后再进行此操作  
3.执行npm run lint，此种方式针对所有文件，但有的错误或警告有时候无法修复  
4.对单行取消提示：在前面加注释如// eslint-disable-next-line vue/require-default-prop，如果是vscode可以通过鼠标悬浮出现修复提示后自动添加。但要注意，对有的代码，如html元素有多个attribute换行时，前面增加 // ....这样的注释并不被认可。  
5.对文件取消息提示：在vue文件第一行增加，在js文件第1行增加// eslint-disable  
注意：错误（红色）必须按提示进行处理，不能取消提示，警告（黄色）尽量处理，实在不好处理的，可按行或按文件取消提示

1、将指定版本的这些依赖安装到 `devDependencies` 中的 `npm` 命令：

npm install --save-dev @vue/eslint-config-standard@^4.0.0 eslint@^8.33.0 eslint-config-airbnb-base@^15.0.0 eslint-config-prettier@^8.6.0 eslint-plugin-import@^2.27.5 eslint-plugin-prettier@^3.1.4 eslint-plugin-prettier-vue@^2.1.1 eslint-plugin-vue@^9.9.0 prettier@^2.1.2 prettier-vue@^1.1.2

2、项目根路径引入相关配置文件

.prettir的全部规范只有十来个，详情可参考https://www.prettier.cn/docs/options.html）

3、scripts中引入lint

"lint": "eslint \"src/**/*.{js,vue}\" --quiet --fix",
"lint:prettier":"prettier --write \"src/**/*.{js,vue}\"",

4、使用lint

npm run lint
！！！！注意：eslint会自动修复一些错误，但有时会引入新的错误，为了确保不影响现有功能，请手动检查每个被修复的文件。！！！！

5、使用prettier脚本

npm run lint:prettier
会自动使用 Prettier 格式化项目文件errc.json：Prettier 的配置文件，用于规定代码格式化规则，如缩进、引号使用、分号添加等。
.prettierignore：指定 Prettier 不处理的文件或目录。
.eslintrc.json：ESLint 的配置文件，定义代码检查规则，包括语法错误、风格问题等。
.eslintignore：指定 ESLint 不检查的文件或目录。prettie

在这里插入图片描述

.prettierrc.json代码

{"printWidth": 120,"singleQuote": true,"useTabs": false,"semi": false,"tabWidth": 2,"trailingComma": "none","bracketSpacing": true,"jsxBracketSameLine": false,"arrowParens": "avoid","endOfLine": "lf"
}

.prettierignore代码

dist/*
node_modules

.eslintrc.json代码

{"root": true,"env": {"browser": true,"node": true,"es2021": true},"extends": ["airbnb-base/legacy","plugin:vue/recommended","prettier"],"parser": "vue-eslint-parser","parserOptions": {"ecmaVersion": "latest","sourceType": "module","ecmaFeatures": {"jsx": true}},"plugins": ["vue","import"],"rules": {"prefer-exponentiation-operator": "off","eqeqeq": "off","no-underscore-dangle": 0,"vue/multi-word-component-names": 0,"func-names": 0,"import/no-extraneous-dependencies": ["error",{"devDependencies": true,"optionalDependencies": true,"peerDependencies": true}],"no-console": ["warn",{"allow": ["warn","error","log"]}],"no-debugger": 2,"no-alert": 2,"no-param-reassign": ["error",{"props": false}],"lines-between-class-members": 0,"dot-notation": 0,"no-plusplus": ["error",{"allowForLoopAfterthoughts": true}]}
}