webpack5+vue3搭建h5项目模板-（二）-eslint代码规范化

本文接上一节：https://blog.csdn.net/weixin_42349568/article/details/124370794?spm=1001.2014.3001.5501

一，eslint

第一步：安装eslint

npm install eslint --save-dev

第二步：生成.eslintrc.js文件：

npx eslint --init

module.exports = {env: {browser: true,es2021: true,node: true,},extends: ['plugin:vue/essential',//这是vue的默认规则'airbnb-base',//eslint推荐的规则（即默认配置）],parserOptions: {ecmaVersion: 'latest',sourceType: 'module',},plugins: ['vue',],rules: {},
};

第三步：理解extends

这里的规则，写在后面的会覆盖前面的，并且rules中的规则最后会覆盖这里的，所以我们自定义规则就是写在rules中，才能覆盖之前的规则，从而生效。

  extends: ['plugin:vue/essential',//这是vue的默认规则'airbnb-base',//eslint推荐的规则（即默认配置）],

Available rules | eslint-plugin-vue (vuejs.org)

第四步：理解rules

Eslint附带了大量的校验规则，这些规则的值分别有如下规律：

off | 0 :表示关闭规则。
warn | 1 :表示将该规则转换为警告。
error | 2 :表示将该规则转换为错误。
常见的rules规则，可以看官网：List of available rules - ESLint中文

// "semi": [2, "always"],//语句强制分号结尾
// "quotes": [2, "double"],//引号类型 ""
//"no-alert": 0,//禁止使用alert
//"no-console": 2,//禁止使用console
//"no-const-assign": 2,//禁止修改const声明的变量
//"no-debugger": 2,//禁止使用debugger
//"no-duplicate-case": 2,//switch中的case标签不能重复
//"no-extra-semi": 2,//禁止多余的冒号
//"no-multi-spaces": 1,//不能用多余的空格

第五步：配置package.json

上文中，我们是手动输入命令行来检查代码是否符合eslint规范的，这样每次检查都要输入一遍，有的人要是记不住这命令怎么办？于是可以在package.json的script中写死这个脚本：

"lint": "eslint --ext .js --ext .jsx --ext .vue src/",

第六步:vscode安装eslint插件

安装了之后什么效果呢？就是它会自动检查你的代码是否符号规范，并且会在编辑器中标识出来哪里不符合规范，底下终端处还会罗列出问题。

第七步：package.json中配置自动修复命令行

检查出问题了一个一个手动修复，太麻烦了。eslint提供了一个–fix的命令行，可以实现自动修复不符合规范的代码，但是这种修复不是万能的，官网中说，有这个（扳手）