一步一步，統一項目中的編碼規範（vue, vscode, vetur, prettier, eslint）

時間  2019-11-06
標籤 一步 統一 項目 編碼 規範 vue vscode vetur prettier eslint 欄目 字符編碼 简体版
原文   原文鏈接

團隊開發中，多人開發同一個項目，因爲我的編碼習慣不一樣，一個項目中最終的代碼風格可能差異很大，因此須要經過工具進行約束來保證代碼風格的統一。同時也但願經過工具儘量的減小低級錯誤出現，而且能幫助修正，因此有了各類各樣的 lint 和 formatter。javascript

本篇的目標是使用 vscode 編輯器，使用 prettier 插件，結合使用 eslint 對代碼進行校驗和修正，並使用 eslint-config-airbnb-base 規則來實現代碼風格的統一。css

通常狀況下，咱們小公司、小 team 可能沒有能力和精力來制訂一套詳盡規則，那麼採用大廠已經制訂好的規則就是很天然的選擇（同時也必要爭論你的好仍是個人好了，人家大廠都這麼幹了，咱們就按人家來吧！:)）html

名詞解釋

  • vscode

一個文本編輯器 code.visualstudio.com/vue

  • prettier

vscode 插件，官方的說明是：Opinionated Code Formatterjava

  • eslint

代碼校驗和修復工具，官方說明是：The pluggable linting utility for JavaScript and JSXreact

  • eslint-config-airbnb-base

一組預先定義好的 eslint 規則，官方說明是：This package provides Airbnb's base JS .eslintrc (without React plugins) as an extensible shared config.git

下面一步一步，經過 vscode 的格式化的使用，到和 prettier 的結合，eslint 使用， prettier 結合 eslint 對 js 和 vue 文件校驗，完成對項目代碼校驗和 fix，力求能以最簡潔的方式把問題說清楚。es6

vscode 開箱即用的 code formatter 功能

vscode 提供開箱即用的代碼樣式化功能（沒有 css 格式化功能），下面在當前文件夾下建立測試文件：./src/demo.html、./src/fun.js、./src/style.css，格式化代碼的快捷鍵是(win)：alt + shift + fgithub

HTML 格式化前：web

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo page</title>
</head>
<body><h1>This is a test page</h1>
<p>Page content</p>
</body>
</html>
複製代碼

格式化後：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo page</title>
</head>

<body>
    <h1>This is a test page</h1>
    <p>Page content</p>
</body>

</html>
複製代碼

JS 格式化前：

function getUserInfo(name) {let HelloStr = "Hello, your name is: "
return HelloStr + name
}
複製代碼

格式化後：

function getUserInfo(name) {
    let HelloStr = "Hello, your name is: "
    return HelloStr + name
}
複製代碼

CSS:

CSS 文件的格式化

能夠看到，CSS 文件默認狀況下是不能被格式化的，這個時間輪到 prettier 登場~

用 prettier 對代碼進行格式化

prettier 的官方解釋是：

  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options

它能和多種編輯器結合，對多種語言進行 format，因此 css 也不是話下。

因爲 vscode 默認有格式化的功能，安裝了 prettier 插件後，prettier 也有格式化的功能以會形成衝突（對於html, js），這裏編輯器會提示你，能夠進行配置。

Prettier 格式化 html

須要注意的是，vscode 和 prettier 會有不少默認配置，能夠經過 CTRL + , 快捷鍵進入配置界面進行管理，全部修改後的結果會保存在 settings.json 文件裏。

剛剛因爲 vscode 默認的格式化程序和 prettier 衝突，通過選擇後造成配置文件並寫入 settings.json，以下：

{
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
複製代碼

上面是指針不一樣類型的文件，分別指定 formatter，固然你也能夠一次性指定全部類型文件的 formatter，修改後的配置文件 settings.json 以下：

{
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}
複製代碼

通過如上配置， css 及其餘類型的文件，擁有了經過 prettier 進行格式化的能力。

用 eslint 對 javascript 代碼進行校驗

通過如上配置，能夠對代碼進行格式化了，可是若是要想去代碼風格進行校驗和修復，就要用到 eslint 了，下面分兩步將 eslint 功能集成了項目中：

  1. 在項目內安裝 eslint 及相關的包
  2. 給 vscode 安裝 eslint 插件

下面分別來講

在項目內安裝 eslint 及相關的包

安裝 eslint

通過上面的操做，將 eslint 及相關的包安裝到項目裏了 package.json以下：

{
  ...
  "dependencies": {
    "eslint-plugin-vue": "^5.2.2"
  },
  "devDependencies": {
    "eslint": "^5.16.0"
  }
  ...
}
複製代碼

項目目錄下多了一個 eslint 的配置文件 .eslintrc.js :

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};
複製代碼

這個配置文件的內容，是經過 npx eslint --init 自動生成的，固然你也能夠手動配置，全部的選項這裏都有中文說明：eslint.cn/docs/user-g…

接下來就能夠手動執行校驗了：

eslint lint

在執行的時候可能會有包未安裝的提示

Failed to load plugin vue: Cannot find module 'eslint-plugin-vue'

手動安裝一下就行了，從執行結果來看，funs.js 文件有一個錯誤提示，說明校驗程序已經能正常跑進來了。

如今採用的規則是 eslint:recommended ，咱們的目標是採用 'eslint-config-airbnb-base'，因此再安裝相應的包：

npm i -D eslint-config-airbnb-base eslint-plugin-import
複製代碼

而後對 .eslintrc.js 進行配置：

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb-base',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {
    'linebreak-style': ["error", "windows"]
  },
};
複製代碼

再進行校驗：

D:\works\secoo\test\code-formatter> npx eslint .\src\funs.js

D:\works\secoo\test\code-formatter\src\funs.js
  1:10  error  'getUserInfo' is defined but never used              no-unused-vars
  2:7   error  'HelloStr' is never reassigned. Use 'const' instead  prefer-const
  3:7   error  'age' is assigned a value but never used             no-unused-vars
  3:7   error  'age' is never reassigned. Use 'const' instead       prefer-const
  3:15  error  Missing semicolon                                    semi

✖ 5 problems (5 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.
複製代碼

能夠看到明顯比以前的錯誤要多，Aribnb 的規則相對較爲嚴格，能夠規避不少低級錯誤。

這裏要重點說一下的是，咱們在 .eslintrc.js 的 rules 里加了 'linebreak-style': ["error", "windows"]，是因爲不一樣系統間對換行的處理不一樣致使的，加這個規則來處理這個問題。

給 vscode 安裝 eslint 插件

走到這裏咱們已經能夠校驗 js 文件了，經過校驗也發現了不少問題，但在 vscode裏並無錯誤提示，這就用到了 vscode 的另外一個插件 eslint，安裝完插件之後，在 vscode 裏能夠看到錯誤提示了：

eslint lint

走到這裏，咱們離成功已經很近啦！

讓 pretter 根據 eslint 校驗結果，對代碼進行樣式化

到目前爲上，已經能夠對 js 文件進行校驗，甚至能夠對 js 文件按規則進行修復了：

D:\works\secoo\test\code-formatter> npx eslint --fix .\src\funs.js

D:\works\secoo\test\code-formatter\src\funs.js
  1:10  error  'getUserInfo' is defined but never used   no-unused-vars
  3:9   error  'age' is assigned a value but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)
複製代碼

可是若是你用 vscode（如前述，vscode 使用 prettier） 進行修復，發現並無應用 Airbnb 的規則，這裏須要手動配置一下：

  • CTRL + , 打開配置界面
  • 擴展 -> Prettier 裏打到 Eslint Integration 並勾選 獲得 vscode 的配置文件 settings.json 以下
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.eslintIntegration": true
}
複製代碼

這時再對 js 文件進行格式化，就能按照指定的規則執行了，具體操做以下：

prettier format follow eslint

校驗而且格式化 vue 代碼

這部分是最麻煩的，不少同窗都在這裏翻車......

首先，要想 vscode 認識 vue 文件，須要安裝插件 vetur，基本上安裝好此插件後就能夠開心的擼 vue 代碼了，vetur 的默認配置以下：

{
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier"
}
複製代碼

以上是默認配置，看着很開以的覺得能夠按着以下方式對代碼進行格式化：

發出格式化命令
    |
    | next
    |
vetur 收到命令 將格式化任務轉交給 prettier
    |
    | next
    |
prettier 收到命令 將格式化任務轉交給 eslint
    |
    | next
    |
eslint 收到命令，將代碼格式化
複製代碼

看似美好的結局被現實打破，當咱們對 vue 文件進行格式化的時候，發它參考的規則是 prettier 規則，而非 eslint 規則。

若是想按着上述規則對 vue 進行格式化須要作兩個事： settings.json

  • 將 vetur 中 js 的 formatter 設置爲 prettier-eslint
{
  ...
  "vetur.format.defaultFormatter.js": "prettier-eslint"
  ...
}
複製代碼
  • 安裝 prettier-eslint 包
npm i -D prettier-eslint
複製代碼

對於這個問題，prettier-eslint 官網上說的很清楚：

This formats your code via prettier, and then passes the result of that to eslint --fix. This way you can get the benefits of prettier's superior formatting capabilities, but also benefit from the configuration capabilities of eslint.

但就是這麼一個問題，我在網上看把無數的同窗繞進去了，確實直線理解的話會有兩個坑：

  1. prettier 不是已經按着 eslint 來格式化 js 了嗎，vetur 指給 prettier 按說沒問題啊！現實是須要傳遞給 prettier-eslint
  2. 不少同窗跨過了第一道坎，但未曾想 prettier-eslint 須要手動安裝一個包啊！

因此致使在最後一步走不下去了。

至此配置基本已經完成，效果以下：

eslint-vue-fix

最後總結

最後總結一下，總共須要作那些工做

  1. 安裝 vscode 插件 eslint、 prettier、 vetur
  2. 配置 eslint 規則
  3. 配置 prettier ，使其按着 eslint 工做
  4. 配置 vetur

最終的配置文件以下： settings.json

{
  "extensions.autoUpdate": false,
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "prettier.eslintIntegration": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "eslintIntegration": true
    }
  },
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "prettier"
}

複製代碼

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ['airbnb-base', 'plugin:vue/recommended'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {
    'linebreak-style': ['error', 'windows'],
    'comma-dangle': ['error', 'never'], // 修正 eslint-plugin-vue 帶來的問題
  }
};
複製代碼

源代碼在 這裏

參考文章：

Tips

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程