ESlint

ESLint 是一款語法檢測工具。因為 本身是一門靈活的動態語言，一千個 Scriptor 就有一千種寫法。為了方便人們的理解，快速上手別人的程式碼。

說明

在開發專案的時候，往往會通過eslint來檢查程式碼格式，而prettier用來進行程式碼的格式化。本篇博文主要是記錄使用vscode開發專案時的eslint和prettier的配置。

vscode 安裝外掛

首先，需要在vscode上安裝eslint和prettier的外掛。

專案中的配置檔案

在vue專案中，.eslintrc.檔案主要負責eslint的相關配www.cppcns.com置。

module.exports = {
  root: true,env: {
    node: true,},extends: ["plugin:vue/essential","eslint:recommended","@vue/prettier"],parserOptions: {
    parser: "babel-eslint",rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",quotes: ['error','single',{ allowTemplateLiterals: true }],// 單引號 允許使用反引號
    semi: ['error','never'],// 禁止末尾使用分號
  },};

關於更多的eslint規則，可以點選這裡檢視。

.prettierrc.js檔案負責prettier的規則設定：

module.exports = {
  tabWidth: 2,// tab
  semi: false,// 結尾不用分號
  singleQuote: true,// 使用單引號
  bracketSpacing: true,// 物件屬性前後加空格
  disableLanguages: ['vuehttp://www.cppcns.com'],// 不格式化vue檔案
}

prettier

prettier 是一個程式碼格式化外掛。它並不關心你的語www.cppcns.com法是否正確，只關心你的程式碼格式，比如是否使用單引號，語句結尾是否使用分號等等。

關於prettier更多詳細的規則，可以點選這裡檢視。

儲存自動格式化

如果希望在vscode中檔案儲存後就自動格式化，可以在設定中進行如下的設定：

或者在settings.json中新增下面的內容也可以做到儲存格式化：

到此這篇關於vscode 配置eslint和prettier的文章就介紹到這了,更多相關vscode 配置eslint和prettier內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！