Vue项目中使用eslint的笔录，编辑器采用sublime3

一、前言

本文主要针对编辑器是sublime的vue项目进行eslint代码规范。

Javascript 是一门弱类型语言，所以语法检查变得尤为重要。虽然有很多前端IDE开发工具，可以很好地帮助我们提示在编写时的错误，但是大多数开发者还是使用的像 Sublime Text、Visual Studio Code 之类的轻量级编辑器，这导致在开发中很容易出现各种错误，比如单词拼写错误，漏掉了括号等。而且每个人的代码编写习惯也不一样，因此有的项目的代码格式千差万别，比如 缩进空格数，有的习惯4个，有的习惯2个，这也导致项目维护起来越来越麻烦，遇到错误也很难定位。因此对 Javascript 进行语法检查的工具应运而生，目前 ESLint 使用最为广泛。这篇将讲解如何将 ESLint 集成到我们的项目中。

二、实现过程

1. **sublime text 3 的安装**
   1.1 sublime text 3的安装，这个网上自行查找安装方法
   1.2 sublime 相关eslint的插件安装，sublimelinter,sublimelinter-eslint
2. vue项目的创建
   2.1 按照网上提供的方案安装，这里采用的是 “ vue init webpack ”的安装方式，这个会提示安装eslint即选择何种代码规范（这里选择airbnb-base)
3. **npm安装eslint相关插件**
   3.1 vue-plugin-vue/html
   3.2 vue-eslint-parser
   3.3 babel-eslint
   3.4 airbnb-base (代码规范）
4. **配置方案**
   本文主要通过配置 ***“.eslintrc.js”*** 实现eslint的代码规范要求。
   ESLint 具有高可配置行，这就意味着你可以根据项目需求定制代码检查规则。
   ESLint 的配置方式可以有以下两种方式：
   --**文件注释：**在 Javascript 文件中使用注释包裹配置内容。
   --**配置文件(推荐)：**在项目根目录下创建包含检查规则的 .eslintrc.* 文件。

三、sublime text 3 的安装

1. sublmie的安装
    可以参考如下地址进行安装
    https://blog.csdn.net/wxl1555/article/details/69941451
2. eslint的sublmie插件
    sublimelinter,sublimelinter-eslint

四、创建VUE项目

通过使用命令创建vue项目 :
`

vue init webpack      //  初始化安装VUE项目
project name          //  输入项目名称
project description   //  输入项目说明
author                //  输入作者
Vue build             //  运行环境
Install vue-router
Use ESLint to lint your code (Yes/No)  //选择YES,安装eslint插件
(选择代码规范airbnb)
Set up unit tests (Y/N)
....

五、npm安装eslint相关插件

在项目目录下，通过使用npm命令安装eslint相关插件

1. airbnb-base (代码规范）
   目前比较流行airbnb公司的代码规范,目前主要使用“air-base”,
   安装依赖：

   npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev

   你也可以根据自己需要，到eslit-aribnb安装地址https://www.npmjs.com/package... 进行安装。
   如果使用vue项目安装方式可以选择这个规范

2. babel-eslint
   babel-eslint 解析器是对babel解析器的包装使其与ESLint解析
3. vue-eslint-parser
   此解析器主要是针对vue文件的template的vue标签进行验证
4. eslint-plugin-vue
   也是针对vue文件的内容进行验证，不能和 eslint-plugin-html放在配置文件中，否则至少放在此插件后面。

六、配置方案

配置文件内容如下，可以根据自己的要求进行更改：

1. .eslintrc.js 文件配置内容
   airbnb的规范虽然比较成熟了，但是每个人都有一些自己的需求，可以按需修改或增加一些规则

   // https://eslint.org/docs/user-guide/configuring
      module.exports = {
        root: true,
        parser: "vue-eslint-parser",
        parserOptions: {
          "ecmaVersion": 6,
          "parser": "babel-eslint",
          "sourceType": "module",
          "allowImportExportEverywhere": false
        },
     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/strongly-recommended', 'airbnb-base'],
     // required to lint *.vue files
     plugins: [
     'vue',
     'vuefix',
    ],
    // check if imports actually resolve
    settings: {
      'import/resolver': {
        webpack: {
          config: 'build/webpack.base.conf.js'
        }
      }
    },
    // add your custom rules here
    rules: {
      // don't require .vue extension when importing
      'import/extensions': ['error', 'always', {
        js: 'never',
        vue: 'never'
      }],
      'linebreak-style': 'off',
      'import/no-unresolved': 0,
      'import/no-dynamic-require': 'off',
      'max-len': [0, 120, 2],
      'space-before-function-paren': ["error", {
          "anonymous": "never",
          "named": "always",
          "asyncArrow": "always"
      }],
      // disallow reassignment of function parameters
      // disallow parameter object manipulation except for specific exclusions
      'no-param-reassign': ['error', {
        props: true,
        ignorePropertyModificationsFor: [
          'state', // for vuex state
          'acc', // for reduce accumulators
          'e' // for e.returnvalue
        ]
      }],
      // allow optionalDependencies
      'import/no-extraneous-dependencies': ['error', {
        optionalDependencies: ['test/unit/index.js']
      }],
      // allow debugger during development
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      // 禁止使用 console 来调试程序,在运行 npm run myEslint 时，命令行不会输出 no-console 警告
      'no-console': 'off',
    }

   }

2. package.json文件配置
   在此文件的scripts中添加一行eslint验证执行命令

   "scripts": {
          "myEslint": "eslint --ext .js,.vue src"
       },

   当然你也可以全局安装以上依赖，这样你可以直接运行 eslint --ext .js,.vue src 命令。
   Ok， 配置好了~
   命令行运行 npm run myEslint
   你会发现检查出一堆错误，不要方，输出的错误说明的非常明显，只需要根据错误提示行号去检查，然后 根据规则更改就行了。
   上面的命令中 --ext 参数就是用来指定需要检查的扩展名的文件，src 就是指定检查的目录。

七、 总结

在vue项目上使用ESLint实际上还算相对简单的，但是对于什么都是半生半熟的知识技能的人来说还是花了点时间。
eslint无论是安装还是配置，实际上还算是比较人性化的。
想要成为一名优秀的程序员，规范化的代码风格格外重要，除了能降低代码出错率，还在代码的可读性上非常有帮助，另外代码注释对于代码的可读性也是必不可少的。
让eslint成为你编写代码的好帮手吧。