09、Eslint prettier解决项目规范 - 《webpack系列》

Eslint
- Eslint的使用
- 在webpack中使用eslint
Vscode的eslint插件
Vscode的prettier插件
参考出处：

Eslint

什么是Eslint？
EsLint是一个静态代码分析工具（Static program analysis，在没有任何程序执行的情况下，对代码进行分析）；

为什么我们需要Eslint？
ESLint可以帮助我们在项目中建立统一的团队代码规范，保持正确、统一的代码风格，提高代码的可读性、可维护性；（ 并且ESLint的规则是可配置的，我们可以自定义属于自己的规则；）

Eslint的使用

安装：

npm install eslint -D

创建Eslint的配置文件,eslint是根据我们在根目录下创建的eslintrc.js配置文件进行检查的。（使用eslint包初始化创建，无需手动创建）：

//命令行输入指令
npx eslint --init

接下来根据需要可以选择自己想要的Eslint规则

安装成功后，我们就可以使用命令对某个文件进行eslint检查

//命令行输入指令
npx eslint ./src/main.js

我们可以一起看下eslintrc.js文件都包含什么内容：

//eslintrc.js  
module.exports = {  
  //环境：使用的是浏览器、commonJS模块化、支持es2021及之前版本  
  env: {  
    browser: true,  
    commonjs: true,  
    es2021: true,  
  },  
  //扩展：在初始化时选择了vue、以及参照airbnb这个项目的eslint，所以自动帮我们安装了这些插件  
  extends: ['plugin:vue/essential', 'airbnb-base'],  

  parserOptions: {  
    //指定ESMAScript版本：ecmaVersion是对应着es2021的  
    ecmaVersion: 12,  
    //指定js解析器，eslint需要解析器将代码进行词法、语法解析，然后生成AST,再进行elsint检查  
    parser: '@typescript-eslint/parser',  
  },  
  //指定用到的插件  
  plugins: ['vue', '@typescript-eslint'],  
  //自定义一些规则  
  rules: {  
    //每个规则都有三种选择：off、warn、error（当规则不通过就会报对应的错误）  
    // 0 => off  
    // 1 => warn  
    // 2 => error  
    'no-unused-vars': 0,  
    quotes: ['warn', 'single'],  
    'no-console': 0,  
    'import/no-extraneous-dependencies': 0,  
  },  
};

一般我们进行配置就是在rules下进行的，对相应的规则进行需要的配置。

这里我们在终端初始化时，选择了参考airbnb项目里用到的eslint规则（eslintrc.js 的11行），所以按照airbnb项目里的eslint规范。
我们在rules里配置我们自定义的规则会去覆盖airbnb的eslint规则。

更多规则可参考eslint官方文档：https://eslint.org/docs/rules/

在webpack中使用eslint

在实际开发中，我们需要在打包的时候统一的进行eslint校验，webpack为我们提供了eslint-loader来完成打包时的eslint校验。

eslint-loader的使用：

//webpack.config.js  
{  
  test: /\.jsx?$/,  
  exclude: /node_modules/,  
  use: [  
           'babel-loader',   
           'eslint-loader'  
       ],  
},

eslint-loader也是会到根目录下的eslintrc.js配置文件去查看关于eslint的配置。(Eslintrc.js配置文件的创建与配置在上边有详细说明。)

Vscode的eslint插件

为什么需要用到vscode的eslint插件？
在真实开发中，我们想要eslint校验时，每次都得在命令行输入 “npx eslint 文件路径”命令的话，这是不太实际的。
哪怕用了webpack的eslint-loader，也只有在打包编译时才校验。我们想要进行校验当然是越快越好，最好在写完一行代码就校验一下是否符合规则。

所以我们可以借助vscode提供的eslint插件，帮我们自动进行校验。在写代码的过程中，如果有不符合规则的时候就立刻在代码里提示。

使用：
Vscode的eslint插件使用起来也很简单，安装后就自动生效了，我们只需要进行上边所提到的配置。

Vscode的prettier插件

为什么需要用到vscode的prettier插件？
当我们使用了eslint配置了很多规则，我们要一个一个去调整所有不符合eslint规则的地方，也是会很麻烦。
而prettier插件会根据prettierrc配置文件帮我们自动格式化代码，变成符合eslint规则的代码。

安装：

设置：
Vscode>文件>首选项>设置>搜索formarrer

配置文件prettierrc:
在项目根目录下手动创建prettierrc配置文件，prettier插件就会根据配置内容格式化代码了。

//prettierrc  
{  
    "tabWidth": 4,  
    "semi": false,  
    "singleQuote": true,  
    "printWidth": 100,  
    "jsxSingleQuote": false,  
    "jsxBracketSameLine": false,  
    "bracketSpacing": true,  
    "arrowParens": "always"  
}

更多相关配置可查看prettier的官方文档:https://www.prettier.cn/

可以设置文件保存自动格式化代码：（默认alt+shift+f格式化代码）
怎么打开settings.json 文件：Vscode>文件>首选项>设置>右上角打开设置

//settings.json  
{  
  // 文件保存自动格式化  
  "editor.formatOnSave": true,  
  // 格式化插件设置为 prettier（前面设置过了formatter，这里可以不用重复设置）  
  "[html]": {  
    "editor.defaultFormatter": "esbenp.prettier-vscode"  
  },  
  "[javascript]": {  
    "editor.defaultFormatter": "esbenp.prettier-vscode"  
  },   
}

参考出处：

https://eslint.org/docs/rules/
https://www.prettier.cn/