Vue 基於VSCode結合Vetur+ESlint+Prettier統一Vue代碼風格

基於VSCode結合Vetur+ESlint+Prettier統一Vue代碼風格

插件安裝

安裝Vetur，ESlint， Prettier - Code formatter插件

安裝方法（安裝ESlint插件為例）：File -> Preferences -> Extensions，打開如下界面，搜索目標插件，點擊安裝按鈕安裝

settings配置

配置文件所在路徑

User配置：%HOMEPATH%\AppData\Roaming\Code\User\settings.json

Workerspace配置：PROJECT_HOME\.vscode\settings.json

說明：User配置為全局配置, 適用於所有的打開的實例，而Workspace配置儲存在工作區之下並僅適用於本工作區的配置，顯然，Workspace配置優先於User配置被使用

settings.json配置

File -> Preferences -> Settings，選擇User、Workspace 配置tab標簽后，點擊圖示按鈕，即可打開settings.json配置文件

然后，把以下配置黏貼到文件，保存即可。

{
  // 界面配置路徑 Text Editor
  "editor.wordWrap": "bounded", // 設置 超過word Wrap Column設置的字符數、達到視口最小寬度，時自動換行
  "editor.wordWrapColumn": 120, // editor.wordWrap 配置為wordWrapColumn或者bounded時起作用
  "editor.insertSpaces": true, // 設置輸入tab鍵時是否自動轉為插入空格（默認ture，即自動轉空格）,當editor.detectIndentation配置為 true 時，該配置項將被自動覆蓋
  "editor.detectIndentation": false, // 設置是否自動檢測對齊，控制打開文件時是否基於文件內容，自動檢測editor.tabSize 和editor.insertSpaces

  // 界面配置路徑 Text Editor -> Font
  "editor.fontSize": 14, // 設置字體大小， 默認 14

  //界面配置路徑 Text Editor -> Files
  "files.autoSave": "afterDelay", //設置延遲一定的時間后自動保存文件
  "files.autoSaveDelay": 1000, // 設置自動保存文件前需要延遲的時間，單位毫秒 默認1000
  "files.enableTrash": true, // 設置刪除文件、目錄時是否允許刪除到操作系統回收站，默認為true，即允許
  "files.encoding": "utf8", // 設置讀寫文件時所用編碼 默認UTF-8，可針對每種語言進行設置
  "files.autoGuessEncoding": false, // 設置打開文件時，是否自動猜測字符編碼，默認false，即不自動猜測，可針對每種語言進行設置
  // 界面配置路徑 Text Editor -> Formatting
  "editor.formatOnPaste": true, // 設置黏貼內容時是否自動格式化，true表示自動格式化，需要配置格式化器(formatter)才可使用
  "editor.formatOnSave": true, // 設置保存文件時是否自動格式化，true表示自動格式化,需要配置格式化器(formatter)才可使用
  "editor.formatOnSaveMode": "file", // 設置保存文件時格式化整個文件還是僅被修改處。該配置項僅在 "editor.formatOnPaste" 為 true時生效
  "editor.formatOnType": true, // 設置輸入完成后是否自動格式化當前行

  // 界面配置路徑 Text Editor -> Minimap
  "editor.minimap.maxColumn": 120, // 設置minimap的寬度以設置可渲染的最大列數，默認120

  // 界面配置路徑 Text Editor -> Suggestions
  "editor.quickSuggestions": null, // 默認選項為on 設置回車時是否接受默認建議選項

  // Eslint插件配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 設置保存時是否自動修復代碼
  },
  // 界面配置路徑 Extensiosn -> ESlint
  "eslint.alwaysShowStatus": true, // 設置狀態欄是否一直顯示ESlint圖標項，true表示一直顯示
  "eslint.format.enable": true, // 設置是否把ESlint作為一個格式化器，true表示啟用

  // Prettier插件配置
  // 界面配置路徑 Extensiosn -> Prettier
  "prettier.enable": true, // 設置是否開啟prettier插件，默認為true，即開啟
  "prettier.semi": false, // 設置是否在每行末尾添加分號，默認為 true
  "prettier.singleQuote": true, // 設置格式化時，保持單引號，如果設置為true，則單引號會自動變成雙引號
  "prettier.tabWidth": 2, // 設置每個tab占用多少個空格
  "prettier.printWidth": 120, // 設置每行可容納字符數
  "prettier.useTabs": false, // 設置是否使用tab鍵縮進行，默認為false，即不使用
  "prettier.bracketSpacing": true, // 在對象，括號與文字之間加空格 true - Example: { foo: bar }   false - Example: {foo: bar}， 默認為true
  "prettier.jsxBracketSameLine": true, // 設置在jsx中，是否把'>' 單獨放一行，默認為false，即單獨放一行
  // 設置各種代碼的默認格式化器//以下為默認配置
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Vetur插件配置
  "vetur.format.enable": true, // 設置是否禁用插件格式化功能 // 默認為true，即開啟
  "vetur.format.defaultFormatter.css": "prettier", // 設置css代碼(<style>包含的代碼塊）默認格式化器
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.html": "prettier", // 設置html代碼(<template>包含的代碼塊)默認格式化器
  "vetur.format.defaultFormatter.js": "prettier-eslint", // 設置js代碼<script>包含的代碼塊）默認格式化器
  "vetur.format.defaultFormatter.ts": "prettier", // 設置vetur默認使用 prettier格式化代碼
  "vetur.format.options.tabSize": 2, // 設置tab鍵占用的空格數，該配置將被所有格式化器繼承
  "vetur.format.options.useTabs": false, // 設置是否使用tab鍵縮進 默認false，即不使用，該配置將被所有格式化器繼承
  //"vetur.ignoreProjectWarning": true // 控制是否忽略關於vscode項目配置錯誤的告警，默認為false，即不忽略
}

設置默認格式化插件

右鍵代碼編輯區，選擇Format Document WIth 彈出提示框如下，選擇Configure Default Formatter...進一步選擇默認格式化器(這里選Vetur)即可。

或者選中要格式化的代碼，按Alt+Shift+F，未設置默認格式化器的時候，會彈出配置默認格式化器的提示，然后按提示操作即可

格式化代碼

按上述配置，按Ctrl + S手動保存文件時會自動化使用Vetur格式化器格式化代碼。

補充說明

ESlint插件

主要用於識別和報告ECMAScript/JavaScript代碼中的語法模式是否存在錯誤

Vetur插件

這里Vetur的主要用途是語法高亮，其次是代碼格式化，支持以下格式化器(formatter)：

• prettier: For css/scss/less/js/ts.
• prettier: For pug.
• prettier-eslint : For js. 運行prettier 和eslint --fix.
• stylus-supremacy : For stylus.
• vscode-typescript: 針對 js/ts. 與VS Code自帶的的 js/ts formatter相同
• sass-formatter: For the .sass section of the files.
• prettyhtml [已被棄用] For html.

雖然Vetur已內置上述格式化器，但是當Vetur檢測到本地已經安裝對應的格式化器時，會優先使用本地安裝的格式化器。

如下，可以為不同語言指定其默認的格式化器，Vetur默認配置如下，如果想禁用某種語言的格式化器，可以將其格式化器設置為null。

{
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.pug": "prettier",
  "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",
  "vetur.format.defaultFormatter.sass": "sass-formatter"
}

兩個特殊的格式化配置項

Vetur支持兩個特殊的tabSize和useTabs格式化配置，如下

{
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false
}

為啥說是特殊呢，因為這兩個配置項，可以被所有格式化器繼承，但是也有例外，如下：

當存在本地配置(比如.prettierrc)時，Vetur會優先使用本地配置。例如：

• .prettierrc 文件存在，但是沒有顯示設置tabWidth ，則Vetur默認使用 vetur.format.options.tabSize 作為prettier格式化器的 tabWidth 配置。
• .prettierrc 文件存在，並且顯示設置了 tabWidth ，則Vetur 自動忽略 vetur.format.options.tabSize配置項目，總是使用.prettierrc中配置的值。

useTabs 的使用規則也是如此

Prettier - Code formatter插件

類似Vetur，：Prettier並不具有ESlint檢查語法能力，主要用於代碼格式化，統一代碼風格(最大長度、混合標簽和空格、引用樣式等)，包括JavaScript，Flow，TypeScript，CSS，SCSS，Less，JSX，GraphQL，JSON，Markdown。

jsxBracketSameLine配置項

該配置項主要用於控制 jsx中，是否把'>' 單獨放一行，默認為false，即單獨放一行

• prettier.jsxBracketSameLine:true - 格式化效果舉例:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

• prettier.jsxBracketSameLine:false - 格式化效果舉例:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

參考連接

https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save

https://eslint.org/docs/user-guide/getting-started

https://vuejs.github.io/vetur/guide/formatting.html#formatters

https://prettier.io/docs/en/options.html