代码风格检查主要采用eslint+prettier实现,同时由vue-eslint-parser、typescript-eslint、eslint-plugin-import、pretty-quick等扩展其功能。
eslint
用来规定 js 语法的代码风格,同时支持对部分代码风格进行自动格式化
安装依赖
yarn add -D eslint eslint-define-config
添加配置文件
在项目根目录下,创建 .eslintrc.js、.eslintignore文件
.eslintrc.js:该文件为语法检查配置文件
.eslintignore:该文件为语法检查忽略文件(同.gitignore)
添加扩展
由于eslint本身只能对js语法进行检查,为了使其支持其他语言,需添加一些必要的扩展
添加vue支持:yarn add -D eslint-plugin-vue vue-eslint-parser
添加ts支持:yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
添加import导入检查:yarn add -D eslint-plugin-import
完善配置
.eslintrc.js
const { defineConfig } = require('eslint-define-config');
// 通过defineConfig声明配置,让配置可以有语法提示
module.exports = defineConfig({
// eslint会逐级向上查找配置文件,直到文件系统根目录,置为true后关闭逐级向上查找
root: true,
// 设置vue-eslint-parser作为vue语法解析器,该解析器应在上层,防止被覆盖
parser: 'vue-eslint-parser',
parserOptions: {
// 此解析器选项由vue-eslint-parser提供,用来设置其他解析器
// 设置@typescript-eslint/parser作为ts语法解析器
parser: '@typescript-eslint/parser',
// 设置项目模块类型为ECMAScript 模块
sourceType: 'module',
// 额外支持jsx,tsx语法
ecmaFeatures: {
jsx: true,
tsx: true,
},
},
// 启用的脚本执行环境
env: {
browser: true,
node: true,
},
// 加载第三方插件,可以配置第三方插件支持的所有规则。可省略eslint-plugin-前缀
plugins: ['@typescript-eslint', 'import'],
// 加载默认规则配置。可省略eslint-config-前缀
// 注:若不引入plugins,仅配置此项,则rules仅可使用此项配置中的规则
extends: [
'eslint:recommended', //eslint推荐规则配置
'plugin:@typescript-eslint/recommended', //ts推荐规则配置
'plugin:vue/vue3-recommended', //vue3推荐配置
],
// 指定文件类型做处理
overrides: [
{
files: ['*.ts', '*.vue'],
rules: {
'no-undef': 'off',
},
},
],
// 自定义规则
rules: {
// js 详细规则:http://eslint.cn/docs/rules/
'no-console': ['warn', { allow: ['error'] }],
camelcase: ['error', { properties: 'never' }],
'no-var': 'error',
'no-empty': ['error', { allowEmptyCatch: true }],
'no-void': 'error',
'prefer-const': [
'warn',
{ destructuring: 'all', ignoreReadBeforeAssign: true },
],
'prefer-template': 'error',
'object-shorthand': [
'error',
'always',
{ ignoreConstructors: false, avoidQuotes: true },
],
'block-scoped-var': 'error',
'no-constant-condition': ['error', { checkLoops: false }],
eqeqeq: 'error',
'no-empty-function': 'error',
// ts 详细规则:https://typescript-eslint.io/rules/
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
'@typescript-eslint/consistent-type-imports': [
'error',
{ disallowTypeAnnotations: false },
],
// vue 详细规则:https://eslint.vuejs.org/rules/
'vue/no-v-html': 'off',
'vue/require-default-prop': 'off',
'vue/require-explicit-emits': 'off',
'vue/multi-word-component-names': 'off',
// import 详细规则:http://www.npmdoc.org/eslint-plugin-importzhongwenwendangzhongwenshili.html
'import/first': 'error',
'import/no-duplicates': 'error',
'import/order': [
'error',
{
groups: [
'builtin',
'external',
'internal',
'parent',
'sibling',
'index',
'object',
'type',
],
pathGroups: [
{
pattern: 'vue',
group: 'external',
position: 'before',
},
{
pattern: '@vue/**',
group: 'external',
position: 'before',
},
{
pattern: '@element-plus/**',
group: 'internal',
},
],
pathGroupsExcludedImportTypes: ['type'],
},
],
},
});
添加命令
在package.json的scripts中添加如下命令即可
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0",
"lint:fix": "eslint --fix . --ext .vue,.js,.ts,.jsx,.tsx",
Prettier
支持更多语言的代码格式化,相对eslint,对代码风格控制更擅长。
安装依赖
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
添加配置文件
在项目根目录下,创建 .prettierrc.js、.prettierignore文件
.prettierrc.js:该文件为代码风格配置文件
.prettierignore:该文件为代码风格忽略文件(同.gitignore)
.prettierrc.js
module.exports = {
semi: true,
singleQuote: true,
};
添加扩展
将eslint-plugin-prettier
加入eslint插件中
plugins: ['@typescript-eslint', 'prettier', 'import'],
由于eslint与prettier同时具备设置代码格式的功能,所以可能存在冲突。此时需要将eslint-config-prettier
加入到eslint的extends中,用来解决冲突。
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-recommended',
'prettier',
],
开启prettier风格错误提醒
rules: {
'prettier/prettier': 'error',
}
添加命令
由于prettier本身并不支持命令行,所以需要额外提供支持yarn add -D pretty-quick
修改package.json中scripts
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --max-warnings 0 && pretty-quick --check",
"lint:fix": "eslint --fix . --ext .vue,.js,.ts,.jsx,.tsx && pretty-quick",
注意
若使用编辑器进行自动代码格式化时,上述配置完成后需要重新开启自动代码格式化,以保证加载最新eslint配置,防止出现eslint格式化与配置不相符。