前言

接上文，本文主要记录下如何实现代码规范化。上文详见：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'
      }
    ]
  }
})

 

 参考文章：从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境 - 掘金