快捷導(dǎo)航

vscode 配置eslint和prettier正確方法

更新時(shí)間：2021年07月28日 11:04:39 作者：反正你猜不到我是誰

ESLint 是一款語法檢測工具而prettier 是一個(gè)代碼格式化插件，今天給大家分享vscode 配置eslint和prettier正確方法，感興趣的朋友一起看看吧

ESlint

ESLint 是一款語法檢測工具。因?yàn)?JavaScript 本身是一門靈活的動(dòng)態(tài)語言，一千個(gè) JavaScriptor 就有一千種寫法。為了方便人們的理解，快速上手別人的代碼。

說明

在開發(fā)項(xiàng)目的時(shí)候，往往會(huì)通過eslint來檢查代碼格式，而prettier用來進(jìn)行代碼的格式化。本篇博文主要是記錄使用vscode開發(fā)vue項(xiàng)目時(shí)的eslint和prettier的配置。

vscode 安裝插件

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

在這里插入圖片描述

項(xiàng)目中的配置文件

在vue項(xiàng)目中，.eslintrc.js文件主要負(fù)責(zé)eslint的相關(guān)配置。

在這里插入圖片描述

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 }], // 單引號(hào) 允許使用反引號(hào)
    semi: ['error', 'never'], // 禁止末尾使用分號(hào)
  },
};

關(guān)于更多的eslint規(guī)則，可以點(diǎn)擊這里查看。

.prettierrc.js文件負(fù)責(zé)prettier的規(guī)則設(shè)置：

在這里插入圖片描述

module.exports = {
  tabWidth: 2,  // tab
  semi: false,  // 結(jié)尾不用分號(hào)
  singleQuote: true,  // 使用單引號(hào)
  bracketSpacing: true,  // 對(duì)象屬性前后加空格
  disableLanguages: ['vue'],  // 不格式化vue文件
}