vscode 配置eslint和prettier正確方法

Posted on by

ESlint

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

說明

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

vscode 安裝插件

首先，需要在vscode上安裝eslint和prettier的插件。

在這裡插入圖片描述


在這裡插入圖片描述

項目中的配置文件

在vue項目中，.eslintrc.js文件主要負責eslint的相關配置。

在這裡插入圖片描述

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: ['vue'],  // 不格式化vue文件
}

prettier

prettier 是一個代碼格式化插件。它並不關心你的語法是否正確，隻關心你的代碼格式，比如是否使用單引號，語句結尾是否使用分號等等。

關於prettier更多詳細的規則，可以點擊這裡查看。

保存自動格式化

如果希望在vscode中文件保存後就自動格式化，可以在設置中進行如下的設置：

在這裡插入圖片描述

或者在settings.json中添加下面的內容也可以做到保存格式化：

在這裡插入圖片描述

到此這篇關於vscode 配置eslint和prettier的文章就介紹到這瞭,更多相關vscode 配置eslint和prettier內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：