Vue項目中使用eslint的筆錄，編輯器採用sublime3

1、前言

本文主要針對編輯器是sublime的vue項目進行eslint代碼規範。

Javascript 是一門弱類型語言，因此語法檢查變得尤其重要。雖然有不少前端IDE開發工具，能夠很好地幫助咱們提示在編寫時的錯誤，可是大多數開發者仍是使用的像 Sublime Text、Visual Studio Code 之類的輕量級編輯器，這致使在開發中很容易出現各類錯誤，好比單詞拼寫錯誤，漏掉了括號等。並且每一個人的代碼編寫習慣也不同，所以有的項目的代碼格式千差萬別，好比 縮進空格數，有的習慣4個，有的習慣2個，這也致使項目維護起來愈來愈麻煩，遇到錯誤也很難定位。所以對 Javascript 進行語法檢查的工具應運而生，目前 ESLint 使用最爲普遍。這篇將講解如何將 ESLint 集成到咱們的項目中。

---

2、實現過程

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.* 文件。

---

3、sublime text 3 的安裝

1. sublmie的安裝
    能夠參考以下地址進行安裝
    https://blog.csdn.net/wxl1555/article/details/69941451
2. eslint的sublmie插件
    sublimelinter,sublimelinter-eslint

---

4、建立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)
....

---

5、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放在配置文件中，不然至少放在此插件後面。

---

6、配置方案

配置文件內容以下，能夠根據本身的要求進行更改：

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 就是指定檢查的目錄。

---

7、 總結

在vue項目上使用ESLint實際上還算相對簡單的，可是對於什麼都是半生半熟的知識技能的人來講仍是花了點時間。eslint不管是安裝仍是配置，實際上還算是比較人性化的。想要成爲一名優秀的程序員，規範化的代碼風格格外重要，除了能下降代碼出錯率，還在代碼的可讀性上很是有幫助，另外代碼註釋對於代碼的可讀性也是必不可少的。讓eslint成爲你編寫代碼的好幫手吧。