一步一步實現中後臺管理平臺模板-14-Vue開發工具配置和使用Vetur, ESLint, Prettier, StyleLint

一,前言

上一篇解決了IE瀏覽器兼容問題
到目前已經更新了13篇,但對於開發工具的配置和使用還隻字未提
一方面開發工具越早啓用越好,有利於代碼規範和開發體驗的優化
但不寫一些有問題的代碼就沒辦法表現出開發工具的效果和好處
到目前位置,其實已經有意無意的加入了一些"有問題"的代碼

本篇,就來介紹Vue開發中實用且能夠有效提高開發效率,保證編碼規範的工具
ps:創建工程時已經選擇了使用ESLint + Prettier

---

二,常用開發工具

首先就是IDE的選擇,隨着前端這幾年的野蠻生長,IDE也是換了又換,sublime,webstorm,vscode...
目前多數使用vscode,少數webstorm,IDE這部分就選擇開源免費的vscode

選擇vscode的原因不僅僅因爲其開源免費,其本身還提供了大量插件且支持自開發插件,配置靈活
例如Vetur插件爲Vue提供了語法高亮,標籤補全,模板生成,Lint檢查,格式化...等等功能

編碼規範方面可使用ESLint做代碼規範和錯誤檢查,幫助開發者及時發現不符合規範或錯誤的代碼

使用prettier做代碼格式化工具,統一多人開發下的代碼格式,功能與ESLint有重疊,但二者專注點不同
ESLint專注於代碼校驗,Prettier則專注於代碼格式的美化

StyleLint是一款CSS代碼檢查工具,有助於開發者統一CSS代碼規範，避免樣式錯誤
stylelint能夠解析 SCSS，Sass，Less 等類 CSS 語法，和識別最新CSS語法,支持開發者自定義規則
stylelint提供的近百項配置主要分爲3類:校對風格,判別代碼可維護性,判斷代碼錯誤

Vue DevTools官方調試工具,它集成了Vuex的調試功能,遠程調試及性能分析功能

這裏我們將針對Vetur, ESLint, Prettier, StyleLint的配置和使用做詳細介紹
目的是實現統一的編碼規範,編碼風格,改善團隊開發中存在的編碼差異

ps:DevTools的使用在另一篇文章已有介紹

---

三,安裝Vetur, ESLint, Prettier, StyleLint

Vetur:

ESLint, Prettier

使用Vue-cli創建工程時,已經選擇自動安裝ESLint, Prettier

package.json:

}
  ...
  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.9.0",
    // 避免eslint和prettier之間衝突
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    ...
  },
  ...
}

關於ESLint, Prettier的配置可以通過根目錄下.eslintrc.js和.prettierrc.js進行配置

默認無.prettierrc.js文件(部分prettier配置可在eslint中實現)
改變Prettier默認配置，只需在根目錄下新建一個.prettierrc.js文件

默認.eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

extends數組，後面繼承前面，引入eslint-plugin-vue插件，並開啓essential系列規則
eslint-plugin-vue提供了四個規則：
	base，essential，strongly-recommended，recommended後面的規則前面規則的拓展
	推薦使用strongly-recommended

StyleLint

使用vue-cli搭建項目時，沒有stylelint相關選項，需要自己安裝

安裝StyleLint:

npm i -D stylelint stylelint-config-standard stylelint-webpack-plugin

Webpack插件stylelint-webpack-plugin:

在編譯之前對源代碼中的 css 代碼進行檢查

---

四,VSCode-Setting配置

{
    "extensions.ignoreRecommendations": false,
    "team.showWelcomeMessage": false,
    "git.enableSmartCommit": true,
    "vsicons.dontShowNewVersionMessage": true,
    "git.autofetch": true,
    "react.beautify.onSave": true,
    "files.associations": {
        "*.js": "javascriptreact"
    },
    "git.confirmSync": false,
    "explorer.confirmDelete": false,
    "[markdown]": {},
    "eslint.enable": true,
    // 配置eslint支持.vue文件
    "eslint.options": {
        "extensions": [
            ".js",
            ".jsx",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // 關閉模板校驗(與本地ESLint衝突)
    "vetur.validation.template": false,
    "eslint.autoFixOnSave": true,
    "editor.tabSize": 2,
    "jest.autoEnable": false,
    "jest.pathToConfig": "./.jest.js",
    "terminal.integrated.rendererType": "dom",
    "window.zoomLevel": 0,
    "editor.quickSuggestions": {
        "strings": true
    },
    "diffEditor.renderSideBySide": true
}

---

五,配置ESLint

在eslint默認配置.eslintrc.js中,使用了essential規則,並添加@vue/prettier防止衝突
Vue提供了多種規格的校驗方式,可根據需要選擇,essential是最基礎的

extends: ["plugin:vue/essential", "@vue/prettier"]

實際項目中,推薦使用strongly-recommended開啓類型校驗

extends: ["plugin:vue/strongly-recommended", "@vue/prettier"]

1)在ECharts一篇中,我們創裝了一個Chart.vue組件,其中props參數並沒有定義參數類型和默認值:

此時,會提示需要定義類型(還需要定義默認值)

2)組件傳參-參數名規範(prop名稱大小寫)

在聲明prop時，命名應始終使用camelCase(駝峯)
而在模板和 JSX 中應始終使用 kebab-case(橫線命名)
即:在 JavaScript 中是 camelCase，在 HTML 中則是 kebab-case

參數使用駝峯命名將產生警告:

需統一使用小寫加"-"連接符

2)定義但未使用警告

有時候,我們希望允許定義但未使用的變量放在那裏,可修改規則:

此時,不在報錯

細心的話可以發現,之前vuex字符串使用單引號,保存後自動變爲單號引號

import { mapState } from "vuex";

這是ESLint的又一個功能

---

3)字符串統一使用雙引號

之前的代碼中,有意提交了一些單引號字符串,這時會產生警告:

使用了"plugin:vue/strongly-recommended"後,會統一修復爲雙引號

---

4)語句強制使用分號結束

相比java,在js中代碼可不需要分號結尾,也可以使用分號結尾,這使得代碼風格不統一

更多規則可參考: http://eslint.cn/docs/rules/

在eslint規則文檔中，帶扳手圖標的規則eslint可自動修復
不帶該圖標的規則，eslint只給出錯誤或警告，需手動進行修復

忽略檢查配置:

.eslintignore

/build/
/dist/
/*.js
/test/unit/coverage/

使用註釋忽略eslint檢查

整個文件忽略檢查:

/* eslint-disable */
alert('整個文件忽略檢查');

指定代碼塊忽略eslint檢查:

/* eslint-disable */
alert('指定代碼塊忽略檢查');
/* eslint-enable */

指定規則禁用警告

/* eslint-disable no-alert, no-console */
alert('no-alert規則忽略檢查');
console.log('no-console規則忽略檢查');
/* eslint-enable no-alert, no-console */

指定行禁用規則警告(兩種方法):

alert('指定行禁用規則警告'); // eslint-disable-line
 
// eslint-disable-next-line
alert('指定行禁用規則警告');

指定行禁用指定規則警告:

alert('指定行禁用指定規則警告'); // eslint-disable-line no-alert
 
// eslint-disable-next-line no-alert
alert('指定行禁用指定規則警告');

指定行禁用多個規則警告:

alert('指定行禁用多個規則警告'); // eslint-disable-line no-alert, quotes, semi
 
// eslint-disable-next-line no-alert, quotes, semi
alert('指定行禁用多個規則警告');

---

六,配置StyleLint(還有些問題需要解決)

在src目錄下新建配置文件.stylelintrc.js:

/**
 * 規則: https://stylelint.io/user-guide/rules
 */
module.exports = {
  extends: "stylelint-config-standard",
  rules: {
    // 不允許使用非法的十六進制顏色值
    "color-no-invalid-hex": true,
    // 不允許顏色值大寫
    "color-hex-case": "lower",
    // 允許使用的度量單位是 em、rem、%、s、px
    "unit-whitelist": ["em", "rem", "%", "s", "px"],
    // "rule-empty-line-before": null,
    // "color-hex-length": "long",
    // "declaration-colon-newline-after": null
  }
};

App.vue中添加一條非法的css:

此時運行項目控制檯會報錯,並中斷運行:

如果在熱重載中修改色值爲非法值會在頁面報錯:

忽略檢查配置:

.stylelintignore:

# 其他類型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff

# 測試和打包目錄
/test/
/dist/

---

七,結尾

本篇介紹了Vue開發中的實用工具配置和使用
使用ESLint+StyleLint把控編碼規範和代碼風格,及時檢測錯誤代碼
(StyleLint有些問題,暫時從Vue-FrameWork-Admin中拿掉了)

還可以使用lint-staged,husky插件,利用githook做代碼提交時的校驗
StyleLint還可以規範CSS的屬性順序
還可以在package.josn中創建對應的檢測命令
等等...後續將補充進來

下一篇介紹自動部署,後面等git環境搭建好了再寫一篇前端的CI/CD

---

八,代碼下載

傳送門:CSDN下載(審覈中)
傳送門:GitHub下載-vue-framework-admin-v0.0.14

---

維護日誌

20191010:
編寫文章
20191014:
修改部分問題,添加lint忽略文件和註釋,上傳代碼
StyleLint有些問題