vite2 + vue3 + ts + volar + elementPlus项目搭建（二.代码检测）

第二章 代码检测

---

---

前言

代码检测这东西，用的时候多，但是自己去动手配置的时候少。而且之前的vue2，一直使用的vue-cli脚手架，自动集成了代码检测和自动纠错，非常方便。导致我们对其了解特别少。
每个团队，或者说每个人的代码风格可能不一样，这里我的建议是尽量使用比较广泛使用的规范。所以我会尽可能地减少去配置的地方。这里将使用eslint+standard+prettier的本地检测，至于后续提交检测暂时不做介绍。

---

一、准备

编辑器： vscode
vscode插件：eslint，prettier - Code formatter，eslint Chinese rules （中文提示：个人比较喜欢，能知道哪里有问题，不影响，喜欢的就装）

二、eslint + standard

1. 安装

npm i eslint -g

eslint工具其实自带了很多大厂规范，所以不需要去强记eslint的包，可以直接用eslint初始化命令引导操作。

2. 初始化

npx eslint --init

因为这里不做提交检测，直接本地检测纠错，所以我选择第三个。发现语法问题之后，直接修复。

C:\code\demo\demo>npx eslint --init
npx: installed 88 in 3.23s
? How would you like to use ESLint? ...
  To check syntax only // 只检测语法
  To check syntax and find problems // 检测语法并发现问题
> To check syntax, find problems, and enforce code style // 检测语法，发现问题，最后修复

这里不做赘述，选择第一个。

C:\code\demo\demo>npx eslint --init
npx: installed 88 in 3.23s
√ How would you like to use ESLint? · style
? What type of modules does your project use? ...
> JavaScript modules (import/export) // es6标准
  CommonJS (require/exports) // CommonJS标准
  None of these

选择vue

C:\code\demo\demo>npx eslint --init
npx: installed 88 in 3.23s
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
? Which framework does your project use? ...
  React
> Vue.js
  None of these

支持ts，选择Yes

C:\code\demo\demo>npx eslint --init
npx: installed 88 in 3.114s
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
? Does your project use TypeScript? » No / Yes

建议两个都选

C:\code\demo\demo>npx eslint --init
npx: installed 88 in 3.114s
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

重点马上就要来了，这里选择第一个，就不用进行各种配置，直接走大厂风格。

C:\code\demo\demo>npx eslint --init
npx: installed 88 in 3.114s
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
? How would you like to define a style for your project? ...
> Use a popular style guide // 选择一个受欢迎的风格指引
  Answer questions about your style // 回答问题选择你的风格
  Inspect your JavaScript file(s) // 自己手动导入eslint风格（.eslintrc.js）

这一步我在eslint默认的几种风格中，选择了我比较喜欢的git standard标准。在vue2中我也比较喜欢这个风格。

C:\code\demo\demo>npx eslint --init
npx: installed 88 in 3.114s
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ How would you like to define a style for your project? · guide
? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript // 阿里的Airbnb, 可能大多数人比较喜欢这个，但是风格随个人喜好，默认双引号，尾巴加冒号，另外在import时必须加后缀，个人无感。
> Standard: https://github.com/standard/standard // GIT standard
  Google: https://github.com/google/eslint-config-google // 谷歌风格
  XO: https://github.com/xojs/eslint-config-xo // XO(简单搜了一下，没找到具体细节)

选择生成js配置文件

C:\code\demo\demo>npx eslint --init
npx: installed 88 in 3.114s
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

最后选择安装就行了。
这里其实，eslint的引导操作已经做了很多事情。
首先看package.json

// package.json
{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.8.0",
    "@typescript-eslint/parser": "^5.8.0",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.2.0",
    "eslint-plugin-vue": "^8.2.0",
  }
}

这里的几个包，直接就支持了包括vue，ts的eslint检测，并加入了Git的standard标准规范。

另外生成了eslint的配置文件，这里我们需要修改一行代码。因为目前vue的规范还是vue2，不支持vue3。这回导致vue3中template可以支持多节点的语法不能通过。
最新版本的eslint已经默认支持vue3语法。同时生成的文件后缀不再是js，而是cjs。.eslintrc.cjs

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    // 'plugin:vue/essential', // vue2
    'plugin:vue/vue3-recommended', // vue3
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  }
}

三、prettier

1.安装

prettier这里需要安装到三个依赖包

npm i prettier eslint-plugin-prettier eslint-config-prettier -D

2.对接eslint

继续修改.eslintrc.cjs文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
  	'plugin:vue/vue3-recommended',
  	'standard',
  	'plugin:prettier/recommended' // 新增
  ],
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
  	'vue',
  	'@typescript-eslint',
  	'prettier' // 新增
  ],
  rules: {
    'prettier/prettier': 'error' // 新增
  }
}

到此为止，eslint+prettier算是配置好了，但是prettier代码检测有自己的一些规则，我们需要重新进行配置。

3.配置

根目录新建 .prettierrc.js .prettierrc.cjs，推荐是走尤雨溪的配置

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}

这里我根据自己的习惯加了一些配置，也可以参考一下。

// .prettierrc.js
module.exports = {
  printWidth: 120, // 一行的字符数换行
  tabWidth: 2, // 一个tab代表几个空格数
  useTabs: false, // 是否使用tab进行缩进
  singleQuote: true, // 字符串是否使用单引号
  semi: false, // 行尾是否使用分号，默认为true
  trailingComma: 'none', // 是否使用尾逗号
  bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  endOfLine:"auto" // 保留在 Windows 和 Unix 下的换行符
}

这里有的巨坑，不知道是我电脑的问题，还是什么，prettier配置之后不生效。反复检查，各种重来都是这样。最后发现关掉vscode，重新启动之后，prettier生效。中间浪费了四五个小时。真的是坑！！！