一、媒介

本文主要針對編輯器是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成為你編寫代碼的好幫手吧。