==代码可读性低代码==
-
==代码规范落地难==
-
==代码格式难统一==
-
==代码质量低下==
配置 ESLint
-
ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。它拥有以下功能：
-
查出 JavaScript 代码语法问题。
-
根据配置的规则，标记不符合规范的代码。
-
自动修复一些结构、风格问题。
-
-
防止代码很难维护，可以帮我们检查有没有死循环，有没有定义但未使用的变量等等。
安装依赖
pnpm install -D eslint @eslint/create-config
-
@eslint/create-config：eslint配置文件初始化工具
生成配置文件
# 生成 ESLint 配置文件模板 npx eslint --init
# 出现如下选择 # 选择2 我们会使用 prettier 进行代码风格校验 How would you like to use ESLint? 1.只检查语法 2.检查语法并提示问题 3.检查语法、提示问题并且强制使用一些代码风格 # 你的项目用的哪一种模块化方式 选择1 What type of modules does your project use? 1.ES6 2.CommonJS 3.None # 使用的框架 选择2 Which framework does your project use? 1.React 2.Vue.js 3.None # 项目是否使用TS yes Does your project use TypeScript? # 项目在哪里跑的 选择1 Where does your code run? 1.browser 2.node # 项目用哪种配置文件 选择1 What format do you want your config file to be in? 1.JavaScript 2.YAML 3.JSON # 是否立即安装需要的依赖 Would you like to install them now? # 会帮我们安装如下插件 # pnpm install -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
-
熟悉之后我们就可以不使用配置生成工具
-
直接新建配置文件进行配置即可
-
ESLint配置文件名称可以为：.eslintrc.js、.eslint.config.js （根据个人习惯选择即可）
这里是我常用的配置规则，更多配置规则请查阅ESLint中文。 单独的语法配置需要在rules中编写，全部配置请参考：List of available rules - ESLint中文
module.exports = {
// 使 eslint 支持 node 与 ES6
env: {
browser: true,
es2021: true,
node: true,
},
// 引入推荐的语法校验规则
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
],
overrides: [],
/*
这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser
先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码
*/
// 选择使用的解析器
parser: 'vue-eslint-parser',
// 解析器的详细配置
parserOptions: {
// 使用最新版 ES 语法
ecmaVersion: 'latest',
// 使用 ESLint TS 解析器
parser: '@typescript-eslint/parser',
// 使用 ES 模块化规范
sourceType: 'module',
},
// 使用的插件
plugins: ['vue', '@typescript-eslint'],
// 自定义规则
rules: {},
};
-
配置完规则后我们配置一条指令用于代码质量的修复
// package.json
// --cache 为仅检测改动过的代码
// --max-warnings 0 表示出现超过0个警告强制eslint以错误状态推出
"scripts": {
"lint:eslint": "eslint --cache --max-warnings 0 {src,mock}/**/*.{vue,ts,tsx} --fix",
},
我们还可以配置忽略文件，让 ESLint 不对这些文件进行校验。 新建 .eslintignore 进行配置。
node_modules *.md .vscode .idea dist /public /docs .husky .local /bin
自动修复
-
大部分IDE支持在修改代码后进行自动修复
-
WebStorme：直接在Setting中搜索ESLint即可进行配置
-
VSCode：需要在项目目录下加入如下配置文件，还需要下载ESLint插件
/.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
配置 Prettier
-
多人协作的项目开发中，保持统一的代码风格是一件很重要的事。
-
Prettier就可以帮我们做到这个事情，但是ESLint不是也能规范代码风格么？可以是可以，但是相比Prettier差了很多，术业有专攻，Prettier可以让我们拥有超级整齐的代码。可以帮助我们配置是否使用分号，缩进的格式等等。
安装依赖
pnpm install -D prettier
添加配置文件
-
Prettier配置文件名称可以为：.prettierrc.js、.prettier.config.js （根据个人习惯选择即可）
-
下面是我常用的一些配置，更多配置规则大家可以前官网查看：Options · Prettier 中文网
module.exports = {
printWidth: 120, //单行长度
tabWidth: 4, //缩进长度
useTabs: true, //使用空格代替tab缩进
semi: true, //句末使用分号
singleQuote: true, //使用单引号
endOfLine: "auto",
trailingComma: "none", // 对象最后一个属性末尾是否要逗号
};
-
配置一个指令便于我们使用prettier进行修复代码风格
{
"script": {
"lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}",
}
}
解决ESLint与Prettier冲突问题
安装依赖
pnpm install -D eslint-config-prettier eslint-plugin-prettier
-
eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。
-
eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。 安装依赖并修改.eslintrc文件。
配置ESLint
/ 此配置在eslint配置文件中新增 "extends": [ "eslint:recommended", "plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" // 在最后面新增extends ],
配置完成之后我们对代码风格的配置只会使用prettier的配置，相当于将eslint中冲突的规则覆盖掉了。 我们还可以配置忽略文件，让 Prettier 不对这些文件进行校验。 新建 .prettierignore 进行配置。
/dist/* /node_modules/**