Solving the conflict between ESLint and Prettier in the Vue project [Vue.js project practice: COVID-19 self-checking system]

COVID-19 Self-Detection System Web Design and Development Documents

Sylvan Ding's first project based on Vue.js. The information provided in this project is for reference only, and the accuracy, validity, timeliness and completeness of the information are not guaranteed. For more information, please see the National Health and Health Commission Commission website!
Explore the docs »

View Demo · Report Bug · Request Feature

Solve the conflict between ESLint and Prettier in Vue project

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.

development environment

node	14.16.1
npm	8.18.0
view-cli	2.9.6
vue	2.5.2

solution

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
}

Please indicate the source when reprinting: ©️ Sylvan Ding 2022