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
最后选择安装就行了。
JavaScript版本
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'standard',
'plugin:vue/vue3-essential'
],
overrides: [
{
env: {
node: true
},
files: [
'.eslintrc.{js,cjs}'
],
parserOptions: {
sourceType: 'script'
}
}
],
parserOptions: {
ecmaVersion: 13,
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
ts版本
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'standard-with-typescript',
'plugin:vue/vue3-essential'
],
overrides: [
{
env: {
node: true
},
files: [
'.eslintrc.{js,cjs}'
],
parserOptions: {
sourceType: 'script',
parser: '@typescript-eslint/parser',
project: './tsconfig.json'
}
}
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser' // 某些版本需要手动添加
},
plugins: [
'vue',
],
rules: {
}
}
三、prettier
1.安装
prettier这里需要安装到三个依赖包
npm i prettier eslint-plugin-prettier eslint-config-prettier -D
2.对接eslint
继续修改.eslintrc.cjs文件
js版本
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'standard',
'plugin:vue/vue3-essential',
'prettier' // 新增
],
parserOptions: {
ecmaVersion: 13,
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint',
'prettier' // 新增
],
rules: {
'prettier/prettier': 'error' // 新增
}
}
ts版本
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'standard-with-typescript',
'plugin:vue/vue3-essential',
'prettier' // 新增
],
overrides: [
{
env: {
node: true
},
files: [
'.eslintrc.{js,cjs}'
],
parserOptions: {
sourceType: 'script'
}
}
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: [
'vue',
'prettier' // 新增
],
rules: {
'prettier/prettier': 'error' // 新增
}
}
到此为止，eslint+prettier算是配置好了，但是prettier代码检测有自己的一些规则，我们需要重新进行配置。
3.配置
根目录新建 .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', // 是否使用尾逗号
arrowParens: 'avoid', // 箭头函数单变量省略括号
bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
endOfLine:"auto" // 保留在 Windows 和 Unix 下的换行符
}
4.其他配置
- .eslintrc.cjs
Parsing error: ESLint was configured to run on `<tsconfigRootDir>/.eslintrc.cjs` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-fileeslint
这里属于是tsconfig未包含eslint配置文件，引入进去即可
{
// ...
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", ".eslintrc.cjs"], // 修改
// ...
}
- vite-env.d.ts
module.exports = {
rules: {
// ...
'@typescript-eslint/triple-slash-reference': 'off'
}
}
- vue
Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\App.vue` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
The extension for the file (`.vue`) is non-standard. You should add `parserOptions.extraFileExtensions` to your config.
module.exports = {
parserOptions: {
// ...
extraFileExtensions: ['.vue']
}
}
-
关于同名简写报错的问题
[vue/valid-v-bind] 'v-bind' directives require an attribute value.eslint-plugin-vue首先
eslint-plugin-vue要安装到最新版。
其次最是最坑的，vscode插件卸载Vetur，千万要卸载，千万要卸载，千万要卸载。
最后Vetur的替代品是Vue - Official，安装好就行。
类似的3.4的很多新特性报错的问题都可以解决
这里有的巨坑，不知道是我电脑的问题，还是什么，prettier配置之后不生效。反复检查，各种重来都是这样。最后发现关掉vscode，重新启动之后，prettier生效。中间浪费了四五个小时。真的是坑！！！
2816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
