解决Vue项目中ESLint和Prettier冲突问题[Vue.js项目实践: 新冠自检系统]

新冠疫情自我检测系统网页设计开发文档

Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息，只供参考之用，不保证信息的准确性、有效性、及时性和完整性，更多内容请查看国家卫健委网站！
Explore the docs »

View Demo · Report Bug · Request Feature

homepage

解决Vue项目中ESLint和Prettier冲突问题

You will need to install the appropriate extension/plugin for your code editor. For VS Code, install ESLint and Prettier. These plugins have millions of downloads each, so it’ll be difficult to miss them in the VS Code extension marketplace. Once you’ve installed these, we are ready to move on to configuring each of them for proper usage.

Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier!

Luckily it’s easy to turn off rules that conflict or are unnecessary with Prettier. Package eslint-config-prettier can exclude all ESLint rules that could conflict with Prettier.

开发环境

node	14.16.1
npm	8.18.0
vue-cli	2.9.6
vue	2.5.2

解决方案

Install eslint-config-prettier:

npm install eslint-config-prettier --save-dev --legacy-peer-deps

You may meet upstream dependency conflict when installing NPM packages with the latest npm version (v8). The effective solution to this error is to pass a command --legacy-peer-deps to the npm install that can help ignore the peer dependencies and continue the installation.

Once the setup is successful, you should see a file eslintrc.js based on the format you chose your configuration file to be in.

Then, add "prettier" to the “extends” array in your .eslintrc.js file. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

Create .prettierrc file written in JSON as configuration file for Prettier:

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}