eslint + vue + prettier 咋配的？

看不懂，本身從頭整一邊，發現比想象中簡單

開發環境

若是但願保存時格式化，在vscode 下，須要 eslint 配合， 具體信息看vscode-eslint

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
複製代碼

一個一個的選配

在一個 vue 項目中想要用 eslint + prettier， 就要結合多個插件， 要清楚下面這點思路， 理解了思路就能夠清晰的選配了

eslint 作 eslint的事情
vue（react等等的都是同理） 作 vue 的事情
prettier 作 prettier 的事情

1. 要校驗.js

• 安裝 eslint
• npm install --save-dev eslint
• 配置 eslint，選一個推薦的規則

// .eslintrc.js
{
  extends: ['eslint:recommended'],
}
複製代碼

2. 要校驗.vue

• 安裝 eslint-plugin-vue，注意文檔的提示， vue3 正式發行在即， 網站文檔已經更新成了 vue3 的使用方式， 要在 git 裏找 v6.* 的版本
• npm install --save-dev eslint-plugin-vue
• 在文檔介紹中， 看到提示要注意解析器的配置。 該插件把 parser 設置成了 vue-eslint-parser， 因此在配置的時候不要把 parser 字段覆蓋了, 把須要的其它解析器移到 parserOptions 去

// .eslintrc.js
{
  extends: ['eslint:recommended', 'plugin:vue/recommended'],
  // parser: "vue-eslint-parser", // `eslint-plugin-vue plugin:vue/recommended` 裏已經設置好了，能夠不用設置
  parserOptions: {
    parser: "babel-eslint" // 僅當用了 Flow 或 尚在實驗中的特性等不被 Eslint 支持的，能夠增長 `babel-eslint`
  }
}
複製代碼

3. 要prettier的格式化

• 安裝 eslint-plugin-prettier
• npm install --save-dev eslint-plugin-prettier
• 此時有了 prettier 的代碼風格校驗，實際過程當中必定會發現， eslint 與 prettier 之間的代碼風格有衝突， 就有了一份應對這個衝突的配置
• 在文檔中能發現它推薦的 eslint-config-prettier。 這份配置用於處理它們之間的衝突
• 安裝 eslint-config-prettier
• npm install --save-dev eslint-config-prettier

// .eslintrc.js
{
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:prettier/recommended", // 它包含了 extends: ['prettier'], plugins: ['prettier']
    "prettier/vue",
  ],
}
複製代碼

所有涉及到的部分

// package.json
{
  ...,
  "devDependencies": {
    "eslint": "^7.0.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.0.5"
  }
}
複製代碼

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:prettier/recommended",
    "prettier/vue",
  ],

  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",

    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
    "vue/html-self-closing": "error",
  },
};
複製代碼

理解了之後，就用官方的腳手架吧^^

官方的腳手架都配好了，它有個 "@vue/prettier"， 其實就是把那prettier套了一層。因此 cli 生成完開直接幹就完事了
不過我優先都是選擇的 recommend， 因此會跟它生成來的有點不同

總結

不必深刻嗷， 搞搞清楚這都是些啥就行了啦。
仔細想一想，若是把 eslint 的文檔仔細通讀一遍，可能就不會有這些問題了...

FAQ

Delete␍eslint(prettier/prettier)

從git上拉取下來會出現這個問題
緣由就是 git and 換行符啦
對比了幾種解決方案， 個人決定是爲 prettier 配置 endOfLine: "auto"

html 經 prettier 格式化後 tag 出現奇怪的格式 html-whitespace-sensitivity

在內斂元素中，空白是會產生影響的，這對格式化形成了困擾
因此，默認狀況下格式化之後，段落換行顯得像 bug 同樣
具體使用哪一個設置，仍是要具體分析的

<!-- --html-whitespace-sensitivity (defaults to css) css - Respect the default value of CSS display property. 根據默認的 html tag css屬性來處理 strict - All whitespace is considered significant. 頁面美觀至上，全部代碼都會嚴格處理空格 ignore - All whitespace is considered insignificant. 代碼美觀至上，頁面可能會產生空格 -->
<!-- <span> is an inline element, <div> is a block element -->

<!-- input -->
<span class="dolorum atque aspernatur" >Est molestiae sunt facilis qui rem.</span >
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div>

<!-- output -->
<span class="dolorum atque aspernatur" >Est molestiae sunt facilis qui rem.</span >
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div>
複製代碼