Vue-cli2使用eslint

曾经终败给现在 2022-10-09 00:39 261阅读 0赞

**前言**

**原文地址（强烈建议看原文）：**https://www.jianshu.com/p/5b7296445a0e

**eslint官网地址**：[https://eslint.bootcss.com/docs/user-guide/getting-started][https_eslint.bootcss.com_docs_user-guide_getting-started]

**目录：**

1.  插件安装
2.  插件简介
3.  实战演练
4.  文件介绍
5.  补充文件
6.  eslint.js配置
7.  关闭eslint
8.  附录官网

## **一. 插件安装** ##

1.sublime text 3 配置和使用eslint：[https://blog.csdn.net/WU5229485/article/details/85325730][https_blog.csdn.net_WU5229485_article_details_85325730]

2.vscode配置和使用eslint：

vscode插件中搜索**eslint**和**prettier安装插件**。

啥也不管，这俩必须得装。

![16680b86b6b7dc34dc5fa55ebca642d6.png][]

![c990b5d34fe98f2fd48c35708dc5e11f.png][]

## **二. 插件简介** ##

vscode插件库里的**eslint**是用来在你写代码的时候就直接给你报错。（vue-cli中的eslint是在浏览器中报错）

**prettier**是代码格式化插件，用来辅助eslint，否则你调了花半天，一格式化全没有。

**在实战前可能需要安装**ESLint**，可以先不安装等****报错了在安装**ESLint

你可以使用 npm 安装 ESLint：

$ npm install eslint --save-dev

## **三. 实战演练** ##

# 创建一个vue项目 vue-cli@2.9.6，更高版本请使用create创建项目。
     vue init webpack eslint_test

![2f1d420212e619f02e1603c2baa787e4.png][]

eslint那一栏请选择none，这样vue-cli会帮你下载eslint，并进行一些基本的配置。

**但是不会帮你设置rules**（rules就是各种代码规范的不允许）。

下载好后目录结构如下：

![45aad4eeea25ea48e0524073219fb5b1.png][]

### **四. 文件介绍** ###

里面有两个文件非常重要。

**.eslintignore 和 .eslintrc.js**

> **.eslintignore** ，见名知意，ignore 忽视一些文件。即在文件里面规定的不会被eslint进行检查。

![fdde067379346993fa196c49467d3602.png][]

例如这里面不会对/build/文件下面的文件做语法检查。

> **.eslintrc.js** ，是eslint能起作用的根本。 **vue-cli里面eslint**和 **vscode里的eslint**都以这个文件为判定标准。

### **五. 补充文件** ###

我们得在根目录下新建一个.prettierrc文件。

> **.prettierrc**，是prettier格式化的配置文件，建议用json格式书写。

![df8303b78d352f5e97ffa430fd4303f4.png][]

例如你如果配置下面样式。

{
       // 采用分号
       "semi": true,
       // 采用单引号
       "singleQuote": true,
       // tab采用两个空格长度
       "tabWidth": 2
     }

格式化过程就会像下图所示：

![0dcaf1eb6c41a5f1624e64da1d4a2434.png][]

双引号自动改成单引号，没加的分号，自动补齐。

## **六. eslint.js配置** ##

上文中说过，.eslintrc.js是eslint起作用的关键文件，所以我们必须学会进行一些配置。

如果安装eslint的时候选择none，.eslintrc.js文件应该和下面是一样的。

// https://eslint.org/docs/user-guide/configuring
     
     module.exports = {
       root: true,
       parserOptions: {
         parser: 'babel-eslint'
       },
       env: {
         browser: true,
       },
       // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
       // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
       extends: ['plugin:vue/essential'],
       // required to lint *.vue files
       plugins: [
         'vue'
       ],
       // add your custom rules here
       rules: {
         // allow debugger during development
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
       }
     }

上面最重要的模块就是rules模块。它是给我们来设定一些eslint的规则的。

例如我在rules里面添加一条规则'no-var': \['error'\],此时我们就不能在程序中使用var来定义变量了。

只能使用let来定义变量，const来定义常量。

rules: {
         // allow debugger during development
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
         'no-var': ['error'],
       },

例如下图中，我写了var a = 1;它直接报错了。

![68d4feded0b7e118c863378178dc71cc.png][]

其他的也与之类似。附常用rule：

rules: {
         // allow debugger during development
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
         'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
         // 尾随逗号规则
         'comma-dangle': [
           'error',
           {
             arrays: 'always',
             objects: 'always',
             imports: 'never',
             exports: 'never',
             functions: 'never',
           },
         ],
         // 禁止使用var规则
         'no-var': ['error'],
         // 必须使用分号
         semi: ['error', 'always'],
         // 必须使用单引号
         quotes: ['error', 'single'],
         // 必须使用两个空格进行缩进
         indent: ['error', 2],
       },

## 七. 关闭eslint ##

参考[vue-cli2创建项目过程的详细解析及项目目录解析][vue-cli2]中方式一和方式三的比较

如：

[https://jingyan.baidu.com/article/ab0b563046106bc15afa7de2.html][https_jingyan.baidu.com_article_ab0b563046106bc15afa7de2.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70][]

## **八. 附录官网** ##

> prettier官网  [https://prettier.io/docs/en/configuration.html][https_prettier.io_docs_en_configuration.html]  
> eslint官网  [https://eslint.bootcss.com/docs/rules/][https_eslint.bootcss.com_docs_rules]  
> airbnb中文文档  [https://github.com/BingKui/javascript-zh\#functions][https_github.com_BingKui_javascript-zh_functions]

[https_eslint.bootcss.com_docs_user-guide_getting-started]: https://eslint.bootcss.com/docs/user-guide/getting-started
[https_blog.csdn.net_WU5229485_article_details_85325730]: https://blog.csdn.net/WU5229485/article/details/85325730
[16680b86b6b7dc34dc5fa55ebca642d6.png]: /images/20221005/e89d4cbac44245d58c917d51a7595727.png
[c990b5d34fe98f2fd48c35708dc5e11f.png]: /images/20221005/f77f313189cb41ea96e32bb6576df821.png
[2f1d420212e619f02e1603c2baa787e4.png]: /images/20221005/354773d002a04297b56351422f20b95d.png
[45aad4eeea25ea48e0524073219fb5b1.png]: /images/20221005/7958bae75a584a41b7275e0d0ad4025d.png
[fdde067379346993fa196c49467d3602.png]: /images/20221005/b1a56340c87c44ac82f0cd77eac81211.png
[df8303b78d352f5e97ffa430fd4303f4.png]: /images/20221005/e574b02716b1488895f02c99655d213e.png
[0dcaf1eb6c41a5f1624e64da1d4a2434.png]: /images/20221005/02e7804bb34d40eca18c3892db295b18.png
[68d4feded0b7e118c863378178dc71cc.png]: /images/20221005/435792608d054a85b7db9e63c11c2166.png
[vue-cli2]: https://blog.csdn.net/yiguang_820/article/details/118109805
[https_jingyan.baidu.com_article_ab0b563046106bc15afa7de2.html]: https://jingyan.baidu.com/article/ab0b563046106bc15afa7de2.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70]: /images/20221005/d5dfa440d00f46f0b95a2a432fb1f824.png
[https_prettier.io_docs_en_configuration.html]: https://link.zhihu.com/?target=https%3A//prettier.io/docs/en/configuration.html
[https_eslint.bootcss.com_docs_rules]: https://link.zhihu.com/?target=https%3A//eslint.bootcss.com/docs/rules/
[https_github.com_BingKui_javascript-zh_functions]: https://link.zhihu.com/?target=https%3A//github.com/BingKui/javascript-zh%23functions