Vue項(xiàng)目中使用eslint的筆錄，編輯器采用sublime3

劉明發(fā)布于2019-08-22 18:03 / 434人閱讀

摘要：一前言本文主要針對(duì)編輯器是的項(xiàng)目進(jìn)行代碼規(guī)范。因此對(duì)進(jìn)行語(yǔ)法檢查的工具應(yīng)運(yùn)而生，目前使用最為廣泛。這篇將講解如何將集成到我們的項(xiàng)目中。七總結(jié)在項(xiàng)目上使用實(shí)際上還算相對(duì)簡(jiǎn)單的，但是對(duì)于什么都是半生半熟的知識(shí)技能的人來(lái)說(shuō)還是花了點(diǎn)時(shí)間。

一、前言

本文主要針對(duì)編輯器是sublime的vue項(xiàng)目進(jìn)行eslint代碼規(guī)范。

Javascript 是一門弱類型語(yǔ)言，所以語(yǔ)法檢查變得尤為重要。雖然有很多前端IDE開(kāi)發(fā)工具，可以很好地幫助我們提示在編寫(xiě)時(shí)的錯(cuò)誤，但是大多數(shù)開(kāi)發(fā)者還是使用的像 Sublime Text、Visual Studio Code 之類的輕量級(jí)編輯器，這導(dǎo)致在開(kāi)發(fā)中很容易出現(xiàn)各種錯(cuò)誤，比如單詞拼寫(xiě)錯(cuò)誤，漏掉了括號(hào)等。而且每個(gè)人的代碼編寫(xiě)習(xí)慣也不一樣，因此有的項(xiàng)目的代碼格式千差萬(wàn)別，比如縮進(jìn)空格數(shù)，有的習(xí)慣4個(gè)，有的習(xí)慣2個(gè)，這也導(dǎo)致項(xiàng)目維護(hù)起來(lái)越來(lái)越麻煩，遇到錯(cuò)誤也很難定位。因此對(duì) Javascript 進(jìn)行語(yǔ)法檢查的工具應(yīng)運(yùn)而生，目前 ESLint 使用最為廣泛。這篇將講解如何將 ESLint 集成到我們的項(xiàng)目中。

二、實(shí)現(xiàn)過(guò)程

1. **sublime text 3 的安裝**
   1.1 sublime text 3的安裝，這個(gè)網(wǎng)上自行查找安裝方法
   1.2 sublime 相關(guān)eslint的插件安裝，sublimelinter,sublimelinter-eslint
2. vue項(xiàng)目的創(chuàng)建
   2.1 按照網(wǎng)上提供的方案安裝，這里采用的是 “ vue init webpack ”的安裝方式，這個(gè)會(huì)提示安裝eslint即選擇何種代碼規(guī)范（這里選擇airbnb-base)
3. **npm安裝eslint相關(guān)插件**
   3.1 vue-plugin-vue/html
   3.2 vue-eslint-parser
   3.3 babel-eslint
   3.4 airbnb-base (代碼規(guī)范）
4. **配置方案**
   本文主要通過(guò)配置 ***“.eslintrc.js”*** 實(shí)現(xiàn)eslint的代碼規(guī)范要求。
   ESLint 具有高可配置行，這就意味著你可以根據(jù)項(xiàng)目需求定制代碼檢查規(guī)則。
   ESLint 的配置方式可以有以下兩種方式：
   --**文件注釋：**在 Javascript 文件中使用注釋包裹配置內(nèi)容。
   --**配置文件(推薦)：**在項(xiàng)目根目錄下創(chuàng)建包含檢查規(guī)則的 .eslintrc.* 文件。

三、sublime text 3 的安裝

1. sublmie的安裝
    可以參考如下地址進(jìn)行安裝
    https://blog.csdn.net/wxl1555/article/details/69941451
2. eslint的sublmie插件
    sublimelinter,sublimelinter-eslint

四、創(chuàng)建VUE項(xiàng)目

通過(guò)使用命令創(chuàng)建vue項(xiàng)目 :
`

vue init webpack      //  初始化安裝VUE項(xiàng)目
project name          //  輸入項(xiàng)目名稱
project description   //  輸入項(xiàng)目說(shuō)明
author                //  輸入作者
Vue build             //  運(yùn)行環(huán)境
Install vue-router
Use ESLint to lint your code (Yes/No)  //選擇YES,安裝eslint插件
(選擇代碼規(guī)范airbnb)
Set up unit tests (Y/N)
....

五、npm安裝eslint相關(guān)插件

在項(xiàng)目目錄下，通過(guò)使用npm命令安裝eslint相關(guān)插件

airbnb-base (代碼規(guī)范）
目前比較流行airbnb公司的代碼規(guī)范,目前主要使用“air-base”,
安裝依賴：

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

你也可以根據(jù)自己需要，到eslit-aribnb安裝地址https://www.npmjs.com/package... 進(jìn)行安裝。
如果使用vue項(xiàng)目安裝方式可以選擇這個(gè)規(guī)范

babel-eslint
babel-eslint 解析器是對(duì)babel解析器的包裝使其與ESLint解析

vue-eslint-parser
此解析器主要是針對(duì)vue文件的template的vue標(biāo)簽進(jìn)行驗(yàn)證

eslint-plugin-vue
也是針對(duì)vue文件的內(nèi)容進(jìn)行驗(yàn)證，不能和 eslint-plugin-html放在配置文件中，否則至少放在此插件后面。

六、配置方案

配置文件內(nèi)容如下，可以根據(jù)自己的要求進(jìn)行更改：

.eslintrc.js 文件配置內(nèi)容
airbnb的規(guī)范雖然比較成熟了，但是每個(gè)人都有一些自己的需求，可以按需修改或增加一些規(guī)則

 // 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 來(lái)調(diào)試程序,在運(yùn)行 npm run myEslint 時(shí)，命令行不會(huì)輸出 no-console 警告
   "no-console": "off",
 }

}

package.json文件配置
在此文件的scripts中添加一行eslint驗(yàn)證執(zhí)行命令

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

當(dāng)然你也可以全局安裝以上依賴，這樣你可以直接運(yùn)行 eslint --ext .js,.vue src 命令。
Ok，配置好了~
命令行運(yùn)行 npm run myEslint
你會(huì)發(fā)現(xiàn)檢查出一堆錯(cuò)誤，不要方，輸出的錯(cuò)誤說(shuō)明的非常明顯，只需要根據(jù)錯(cuò)誤提示行號(hào)去檢查，然后根據(jù)規(guī)則更改就行了。
上面的命令中 --ext 參數(shù)就是用來(lái)指定需要檢查的擴(kuò)展名的文件，src 就是指定檢查的目錄。

七、總結(jié)

在vue項(xiàng)目上使用ESLint實(shí)際上還算相對(duì)簡(jiǎn)單的，但是對(duì)于什么都是半生半熟的知識(shí)技能的人來(lái)說(shuō)還是花了點(diǎn)時(shí)間。
eslint無(wú)論是安裝還是配置，實(shí)際上還算是比較人性化的。
想要成為一名優(yōu)秀的程序員，規(guī)范化的代碼風(fēng)格格外重要，除了能降低代碼出錯(cuò)率，還在代碼的可讀性上非常有幫助，另外代碼注釋對(duì)于代碼的可讀性也是必不可少的。
讓eslint成為你編寫(xiě)代碼的好幫手吧。