代码格式化、规范化说明
使用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}]}
}
.eslintignore
dist/*
vue.config.js
vite.config.js