配置项目规范editorconfig+eslint+prettier
详细介绍可以看一下这篇文章代码规范之-理解ESLint、Prettier、EditorConfig (baidu.com)
.editorconfig
root = true
# 说明
# 设置文件编码为 UTF-8
# 用两个空格代替制表符
# 控制缩进大小
# 在保存时删除尾部的空白字符
# 在文件末尾添加一个空白行
[*]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
end_of_line = lf
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
eslint 配置注意点
- 安装eslint
npm install eslint -D or yarn add eslint
- 配置.eslintrc.js
module.exports = {
root: true,
env: {
browser: true, // browser global variables
es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
node: true,
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 12,
},
rules: {
semi: ['error', 'never'],
quotes: ['error', 'single']
}
}
当配置完上面选项，在src下面新建一个index.js（ts也是可以的）使用双引号，结尾加分号就会有红色的提示，如果eslint 没有生效，重启一下vscode
然后我们使用下面的命令校验，控制台就会打印出提示
npx eslint src/index.js
然后使用下面的命令,不符合规则的代码就被修复了
npx eslint --fix src/index.js
注意： 我们使用npx测试eslint的时候可以不用在vscode安装eslint插件，但是我们总不能每次写完代码都要手动去执行npx eslint ... 这样效率也太低了，所以需要安装eslint插件，并且配置setting.json （ctrl+shift+p打开），保存后就可以修复我们的代码
{
// 保存自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
此时js，ts都可以进行校验了，我们再测试vue文件里面是否也可以进行校验,进入文件发现文件名已经变红了，说明有错误，鼠标放到script标签上提示Parsing error: Unexpected token <eslint> ，这是因为eslint默认不支持对vue校验，需要安装对应的插件 eslint-plugin-vue
npm install eslint-plugin-vue or yarn add eslint-plugin-vue
.eslintrc.js 中添加
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 12,
},
extends: ['plugin:vue/vue3-recommended'],
rules: {
semi: ['error', 'never'],
quotes: ['error', 'single']
}
}
现在eslint 校验对vue文件已经起作用了，注意如果代码有报错，eslint不会工作，
- 到目前为止我们使用的校验规则是eslint默认和我们自己配置的规则，为了规范团队成员代码格式，以及保持统一的代码风格，项目采用当前业界最火的Airbnb规范，
npm install eslint-config-airbnb-base -D or yarn add eslint-config-airbnb-base -D
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 12,
},
extends: ['plugin:vue/vue3-recommended','airbnb-base'],
rules: {
semi: ['error', 'never'],
quotes: ['error', 'single']
}
}
vue3+ts 项目中如何对ts文件以及vue文件进行校验
yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier -D
注意：如果配置好了，但是没有生效，重启vscode
// .eslintrc.js
module.exports = {
plugins: ['@typescript-eslint'],
// Prerequisite `eslint-plugin-vue`, being extended, sets
// root property `parser` to `'vue-eslint-parser'`, which, for code parsing,
// in turn delegates to the parser, specified in `parserOptions.parser`:
// https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error
parserOptions: {
parser: require.resolve('@typescript-eslint/parser'),
extraFileExtensions: ['.vue'],
},
extends: [
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/eslint-recommended',
'prettier',
'plugin:prettier/recommended',
],
overrides: [
{
files: ['*.ts', '*.tsx', '*.vue'],
rules: {
// The core 'no-unused-vars' rules (in the eslint:recommeded ruleset)
// does not work with type definitions
'no-unused-vars': 'off',
semi: ['error', 'never'],
},
},
],
}
.prettierrc.js
module.exports = {
useTabs: false,
tabWidth: 2,
printWidth: 120,
singleQuote: true,
semi: false,
trailingComma: 'none',
bracketSpacing: true,
endOfLine: 'auto',
ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
}
此时就完成了eslint+prettier配置，还是有冲突的地方，需要按需修改
