前言
接上文,本文主要记录下如何实现代码规范化。上文详见:Vite 3.x + Vue 3.x + TypeScript 4.x + Element Plus + Pinia 搭建项目_倔强的小绵羊的博客-CSDN博客
一、集成 EditorConfig 配置
官网地址:EditorConfig
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
在项目根目录下新增 .editorconfig 文件。
# Editor configuration, see http://editorconfig.org
# 表示是最顶层的 EditorConfig 配置文件
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格(tab | space)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
注意:VSCode 使用 EditorConfig 需要下载扩展插件 EditorConfig for VS Code
二、集成 Prettier 配置
官网:Prettier · Opinionated Code Formatter
①、安装 Prettier
# npm
npm install --save-dev --save-exact prettier
# yarn
yarn add --dev --exact prettier
②、创建 Prettier 配置文件
echo {}> .prettierrc
配置 .prettierrc
# .prettierrc
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 88,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false
}
然后,创建一个 .prettierignore 文件,让 Prettier 和编辑器知道哪些文件不用格式化,例如:
# .prettierignore
node_modules
dist
③、使用 Prettier 格式化所有文件
# npm
npx prettier --write .
# yarn
yarn prettier --write .
注意:VSCode 编译器使用 Prettier 配置需要下载插件 Prettier - Code formatter。
三、集成 ESLint 配置
①、安装 ESLint
# npm
npm install eslint --save-dev
# yarn
yarn add eslint --dev
注意:VSCode 使用 ESLint 配置文件需要下载插件 ESLint。
②、配置 ESLint
初始化命令:
# npm
npx eslint --init
# yarn
yarn eslint --init
- 选择模式,本项目这里选择 To check syntax, find problems, and enforce code style(检查语法、发现问题并强制执行代码风格)
- 选择语言模块,本项目选择 JavaScript modules (import/export)
- 选择语言框架,这里选择 Vue.js
- 项目是否使用 TypeScript,这里选择 Yes
- 代码在哪里运行,这里选择 Browser 和 Node (按空格选择,选完后回车键确定)
- 为项目定义风格,这里选择 Use a popular style guide(使用一种流行的风格指南)
- 想遵循哪种风格指南,这里选择 Airbnb
- 你希望配置文件是什么格式,这里选择 JavaScript
- 现在安装它们吗,这里选择 Yes
- 使用哪个包管理器,这里选择 yarn
注意:如果自动安装依赖失败,那么需要手动安装
# npm
npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D
# yarn
yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D
③、ESLint 配置文件
上面操作完成后,在项目根目录下会自动生成 .eslintrc.cjs 文件。
注意:这里为什么是 .cjs 文件,因为本项目是使用 vite3 构建,在 package.json 中设置了 "type": "module"
// .eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: ['plugin:vue/essential', 'airbnb-base'],
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: ['vue', '@typescript-eslint'],
rules: {}
}
根据项目实际情况,修改 .eslintrc.cjs 配置 。
④、修改 package.json 文件
{
"script": {
...
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
}
}
⑤、新增 ESLint 忽略文件
在项目根目录下新增 .eslintignore 文件
# .eslintignore
node_modules
dist
index.html
*.d.ts
四、解决 ESLint 和 Prettier 冲突
我们通常会在项目中根据实际情况添加一些额外的 ESLint 和 Prettier 配置规则,难免会存在规则冲突情况。
解决两者冲突问题,需要用到 eslint-plugin-prettier 和 eslint-config-prettier。
- eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中;
- eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则
最后形成优先级:Prettier 配置规则 > ESLint 配置规则。
①、安装插件
# npm
npm i eslint-plugin-prettier eslint-config-prettier -D
# yarn
yarn add eslint-plugin-prettier eslint-config-prettier -D
②、在 .eslintrc.cjs 中添加 Prettier 插件
module.exports = {
...
extends: [
...
"plugin:prettier/recommended", // 插件约束规范 解决eslint和prettier的冲突问题
],
}
extends 代表继承多个规范。在继承的情况下,里面包含相同的规则,最后一个会把前面相同的规则覆盖掉。
③、本项目 .eslintrc.cjs 文件配置
// @ts-check
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
root: true,
globals: { defineOptions: 'writable' },
env: {
browser: true,
es2021: true,
node: true
},
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
extends: [
'plugin:vue/vue3-recommended',
'airbnb-base',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
plugins: ['vue', '@typescript-eslint'],
rules: {
'import/prefer-default-export': 'off',
'prettier/prettier': 'error',
'import/no-unresolved': 'off',
'import/extensions': 'off',
'import/no-absolute-path': 'off',
'import/no-extraneous-dependencies': 'off',
'vue/multi-word-component-names': 'off',
'no-undef': 0,
'vue/script-setup-uses-vars': 'error',
'vue/no-reserved-component-names': 'off',
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'vue/first-attribute-linebreak': [
'error',
{
singleline: 'ignore',
multiline: 'below'
}
],
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': 'error',
'no-unused-vars': 'error',
'space-before-function-paren': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/require-default-prop': 'off',
'vue/require-explicit-emits': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always'
},
svg: 'always',
math: 'always'
}
]
}
})