「初学者商城」- 后台 - ESLint 格式化代码（新功能）

1. 前言

通常，开发一个项目都是多人同时进行的，但是每个人的书写习惯以及代码规范不可能一模一样，比如字符串用单引还是双引，转行空几格等等。这时就需要统一起来，ESLint插件就是一个绝佳的选择。

2. 源码

完整项目地址：https://github.com/intomylife/osc-front

v1.4.1 标签地址：https://github.com/intomylife/osc-front/releases/tag/v1.4.1

v1.4.1 下载地址：zip，tar.gz

注：对于标签的说明「初学者商城」- 写在最前面 #5.1

3. 后台

注：查看更改内容：ESLint 格式化代码

3.1 vsCode 中安装 ESLint 插件

1. 打开 vsCode
2. 点击左侧栏中的组件入口
3. 输入ESLint进行搜索
4. 选择第一个，点击Install
5. 下载完成后，根据提示重启 vsCode

3.2 .eslintrc.js

注：此文件用于编写代码规范的校验规则，内容比较长，就不全部粘贴出来了

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
      ...
  }
}

• root: true：表示当前文件为根配置文件
• parserOptions：指定 js 导入方式为 module 即模块导入方式
• env：指定环境的全局变量
• extends：继承规则
• rules：自定义规则

3.3 .eslintignore

注：此文件用于排除不需要校验的文件或目录

build/*.js
src/assets
public
dist
node_modules

• 写法与.gitignore文件一致
• 这里有个概念要清楚：指定的文件或目录只是不主动校验是否符合规则（不会出现红色或者黄色的警告），但是这些文件保存的时候还是会根据规则来格式化

3.4 .prettierrc.json

注：此文件用于格式化代码

3.4.1 为什么引入了ESLint还需要prettier

ESLint：代码规范检查工具，用来格式化代码规范（空几格，缩进）
prettier：代码检查工具，用来格式化代码（逗号还是分号，单引还是双引）

3.4.2 文件内容

{
    "singleQuote": true,
    "semi": false
}

• "singleQuote": true：使用单引号
• "semi": false：语句末尾不加分号

3.5 首选项设置

在settings.json文件中添加如下配置

{
    // eslint 保存格式化
    "editor.formatOnSave": true
}

3.6 其它

1. 版本号的升级

4. 验证

4.1 后台

4.1.1 下载 v1.4.1

1. 安装依赖npm install
2. 打开HelloWorld.vue文件
3. 在代码中随意加几个空格
4. 会先出现黄色的警告线
5. command s/ctrl s保存，如果格式自动恢复，表示成功

4.1.2 更改 v1.3

1. 先添加如下依赖

npm install eslint --save-dev
npm install eslint-plugin-html --save-dev
npm install eslint-plugin-vue --save-dev
npm install eslint babel-eslint --save-dev
npm install prettier --save-dev

2. 打开HelloWorld.vue文件
3. 在代码中随意加几个空格
4. 会先出现黄色的警告线
5. command s/ctrl s保存，如果格式自动恢复，表示成功

4.1.3 题外话 - 如果不生效怎么解决

1. 在vsCode的控制台中，有一个叫输出的选项，点击它（控制台的顶部左侧第二个选项）
2. 在下拉中选择ESLint（控制台的顶部右侧）
3. 如果显示如下信息就表示ESLint插件启动成功

ESLint server is running.

4. 如果不是，那么请根据抛出的错误信息寻找对应的解决方案

4.1.4 题外话 - --save-dev/–save 区别

注：在使用npm命令安装依赖时，添加了--save-dev或--save是用来干什么的

1. --save添加的依赖会显示在package.json - dependencies中
2. --save-dev添加的依赖会显示在package.json - devDependencies中
3. 而dependencies中的插件是用于生产的
4. devDependencies中的插件是用于开发的
5. 所以在安装依赖时，得先想清楚这个依赖是否只用于开发中；比如上面安装的eslint这些用于格式化代码的插件，只会在开发中使用，所以加上了--save-dev安装到了devDependencies中

5. 结语

代码规范后，不仅方便了他人，更方便了自己。阿，快乐。

希望能够帮助到你

over