直奔主題，講講怎麼在Vue專案中整合Prettier和ESLint，自動完成程式碼語法檢查和格式化，讓我們能夠擺脫程式碼格式困擾，從而更多的關注功能和邏輯，讓編碼更高效，更優雅。

安裝VS Code外掛Vetur：專為vscode開發的工具集，能夠為vue提供語法高亮，程式碼檢查，智慧提示等；Prettier：主要是面向前端的程式碼格式化工具，支援Typescript、Javascript、Html、CSS等；ESLint：用來發現和修復Javascript的語法或者格式錯誤，提供了多種規範可選，目前也支援Typescript；

Vetur外掛截圖

Prettier外掛截圖

ESLint外掛截圖

安裝Prettier和ESLint相關的庫

npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier

eslint:用來識別和報告ECMAScript/JavaScript語法錯誤的工具；

eslint-config-prettier:用於關閉ESLint非必要的或者跟Prettier有衝突的規則；

eslint-plugin-prettier:使Prettier成為ESLint的規則，並且報告跟ESLint的規則衝突；prettier:一個格式化工具，支援Js、Html、CSS等前端語言格式化；

安裝Airbnb配置

npx install-peerdeps --dev eslint-config-airbnb

配置ESLint

在專案根目錄建立.eslintrc.js配置檔案，並配置如下：

module.exports = {  parser: 'babel-eslint',  extends: ['airbnb', 'prettier'],  plugins: ['prettier'],  rules: {    'prettier/prettier': 'error',  },  // js配置檔案寫註釋不會報錯哦};

注意這裡使用了js格式的配置檔案，相比json格式的配置檔案有兩個好處：1.能夠在裡面使用註釋；2.能夠被自動格式化。下面的prettier配置檔案也使用了js格式，出於同樣的原因。

配置Prettier

在專案根目錄建立.prettierrc.js配置檔案，並配置如下：

module.exports = {  semi: true,  singleQuote: true,  tabWidth: 2,  useTabs: false,};

開啟VSCode儲存時格式化

開啟儲存時自動格式化，避免手動執行的多餘操作，提高效率。在專案根目錄建立.vscode目錄，在其中建立settings.json檔案，目的是隻針對當前專案配置生效。settings.json內容如下：

{    "editor.formatOnSave": true,    "[vue]": {        "editor.defaultFormatter": "esbenp.prettier-vscode"     },     "[html]": {        "editor.defaultFormatter": "esbenp.prettier-vscode"     },     "[javascript]": {        "editor.defaultFormatter": "esbenp.prettier-vscode"     },     "[typescript]": {        "editor.defaultFormatter": "esbenp.prettier-vscode"     },}

demo最終截圖

demo檔案目錄結構

以上配置經過測試！

如果喜歡別忘了點關注哦！