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

向右看齐 2023-06-30 01:36 54阅读 0赞

# 1. 前言 #

--------------------

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

# 2. 源码 #

--------------------

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

v1.4.1 标签地址：[https://github.com/intomylife/osc-front/releases/tag/v1.4.1][https_github.com_intomylife_osc-front_releases_tag_v1.4.1]

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

**注：对于标签的说明[「初学者商城」- 写在最前面 \#5.1][- _ _5.1]**

# 3. 后台 #

--------------------

**注：查看更改内容：[ESLint 格式化代码][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

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

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

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

ESLint server is running.

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

### 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

[https_github.com_intomylife_osc-front]: https://github.com/intomylife/osc-front
[https_github.com_intomylife_osc-front_releases_tag_v1.4.1]: https://github.com/intomylife/osc-front/releases/tag/v1.4.1
[zip]: https://github.com/intomylife/osc-front/archive/v1.4.1.zip
[tar.gz]: https://github.com/intomylife/osc-front/archive/v1.4.1.tar.gz
[- _ _5.1]: https://intomylife.blog.csdn.net/article/details/103745935
[ESLint]: https://github.com/intomylife/osc-front/commit/ee42263e76cc169008de01c385bdf8eb5896e985