一、前言
项目用了yarn做包管理,所以之后的所有的依赖都是通过yarn安装的。
二、增加eslint配置
1、安装eslint
yarn add eslint -D
2、初始化eslint的配置
yarn eslint --init
此时eslint会提供各种选项进行配置的半自定义。
√ How would you like to use ESLint? 你希望怎样使用eslint
√ What type of modules does your project use? 你的项目使用什么模块
√ Which framework does your project use? 当前项目使用的框架选择
√ Does your project use TypeScript? · No / Yes 是否使用typescript
√ 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-with-typescript 项目风格
√ What format do you want your config file to be in? · JavaScript 配置文件格式
√ Would you like to install them now? · No / Yes 确认是否安装
√ Which package manager do you want to use? · yarn 安装方式
3、增加用于解析vue单文件组件的eslint解析器
yarn add vue-eslint-parser -D
在.eslintrc中配置对应的解析器
"parser": "vue-eslint-parser",
4、调整eslint配置表
增加eslint的运行环境
"env": {
"browser": true,
"node": true,
"es2021": true,
"es6": true
},
增加解释器的配置项
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": [
"./tsconfig.json",
"./tsconfig.node.json"
],
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [
".vue"
]
},
5、修改package.json配置,增加整体格式化项目代码的命令
"scripts": {
"lint": "eslint --fix \"./src/**/*.{ts,js,vue}\""
},
6、配置eslint过程中可能遇到的问题
6.1、Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
解决方案:
在配置中增加
"parserOptions": {
"project": [
"./tsconfig.json"
],
},
原因:@typescript-eslint/parser会解析项目更目录下的tsconfig.json中的配置,因为tsconfig.json中配置了整个项目所需的编译文件和编译选项。
6.2、The extension for the file (.vue) is non-standard. You should add parserOptions.extraFileExtensions to your config
解决方案:
在配置中增加
"parserOptions": {
"extraFileExtensions": [
".vue"
]
},
原因:默认解析器是不会对.vue相关的文件进行解析的,所以需要进行额外的配置
6.3、Parsing error: ESLint was configured to run on <tsconfigRootDir>/vite.config.ts using parserOptions.project
解决方案:
在配置中增加
"parserOptions": {
"project": [
"./tsconfig.node.json"
],
},
三、增加vite-plugin-eslint插件
1、插件作用
该插件可以在项目build之前校验是否存在代码规范问题,然后抛出对应的异常,终端构建。如下:
2、安装vite-plugin-eslint插件
yarn add -D vite-plugin-eslint
3、配置插件
在vite.config.ts配置文件中增加对应插件的引用
然后再配置中增加对应的初始化
import eslintPlugin from 'vite-plugin-eslint'
plugins: [
...
eslintPlugin({
include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue']
}),
...
],
4、可能遇到的问题
4.1、无法找到模块“vite-plugin-eslint”的声明文件。“xxxx”隐式拥有 "any" 类型。
There are types at 'xxxxx/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vite-plugin-eslint' library may need to update its package.json or typings.ts(7016)
错误原因:
在新版 TypeScript 中,已经不在使用 package.json 根结构中的 types 字段。而是需要在 exprots 中添加 typs 字段。官方文档
如:
{
"name": "vite-plugin-eslint",
"version": "1.8.1",
"description": "ESLint plugin for vite.",
"author": "Xiang Gao",
"license": "MIT",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
// 旧版声明
"types": "./dist/index.d.ts",
"exports": {
".": {
// 新版本的声明
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/index.mjs"
},
"require": "./dist/index.js"
}
},
…
}
解决方案:目前直接把对应的错误注释掉了,不影响整体运行,网上找的各种方案实操都失败了
四、增加Prettier
1、增加prettier需要的插件
yarn add prettier eslint-config-prettier eslint-plugin-prettier stylelint-config-prettier -D
各个插件的作用:
prettier:prettier插件
eslint-config-prettier:eslint和prettier之前对于代码规范的配置可能存在冲突,如一个希望单引号,一个希望是双引号。这个插件就是用于解决eslint和prettier冲突,该插件会禁止于prettier冲突的eslint规则
eslint-plugin-prettier:将prettier作为eslint规则,eslint可以按照prettier的配置进行格式化代码
stylelint-config-prettier:关闭所有不必要的或者有可能与Prettier冲突的规则
2、在eslint配置中增加prettier的引用
{
……
"extends": [
……
"plugin:prettier/recommended"
],
3、配置prettier的规则
{
printWidth: 120; // 超过最大值换行
tabWidth: 2; // 缩进字节数
semi: false; // 句尾添加分号
singleQuote: true; // 使用单引号代替双引号
trailingComma: "all"; // 在对象或数组最后一个元素后面是否加逗号
}
至此,一个项目的代码格式规范基本配置完成