Install VS Code and plug-ins

  1. Vetur
  2. ESLint
  3. Prettier – Code formatter

settings.json

{//.vue file template formatting is supported, and the jS-beautify-HTML plug-in is used"vetur.format.defaultFormatter.html": "js-beautify-html", / / js - beautify - HTML formatting configuration, attribute mandatory line / / document: https://github.com/beautify-web/js-beautify#css--html
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force"}}, // Define the vUE file type according to the file suffix"files.associations": {
    "*.vue": "vue"}, // EsLint automatically fixes errors when saved"eslint.validate": [
    "javascript"."javascriptreact",
    {
      "language": "vue"."autoFix": true}]."eslint.autoFixOnSave": true
}
Copy the code

Lint and Prettier conflict fix

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential"."eslint:recommended"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off"."no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"."no-alert": process.env.NODE_ENV === "production" ? "error" : "off", // Enforces single quotes: ["error"."single"], // Force not to use semicolon endings semi: ["error"."never"]
  },
  parserOptions: {
    parser: "babel-eslint"}};Copy the code
// .prettierrc
{
  "eslintIntegration": true// Use single quotes"singleQuote": true// End without a semicolon"semi": false
}
Copy the code