VUE启动ESLint格式化校验报错处理

428 阅读2分钟

VUE启动ESLint格式化校验报错处理

一、不进行ESLint校验

${root_path} 添加 .eslintignor 文件,文件添加配置

*.js
*.vue

二、将代码格式化

历史项目,就睁只眼闭只眼吧!但是我们可以进行代码格式化配置,后期写代码自动格式化,提高效率。
1、安装插件 ESLint、Prettier、Vetur
2、VSCode的setting.json添加如下配置

{
  "workbench.iconTheme": "vscode-icons",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 输入后格式化
  "editor.formatOnType": true,
  // 粘贴时格式化
  "editor.formatOnPaste": true,
  // 编辑器字体大小
  "editor.fontSize": 16,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  "vsicons.dontShowNewVersionMessage": true,
  // 保存后自动修复格式
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // eslint语法校验的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  /***********************  prettier的配置 start ***********************/
  // 让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // 去掉代码结尾的分号
  "prettier.semi": false,
  // 使用单引号替代双引号
  "prettier.singleQuote": true,
  // prettier- (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
  "prettier.arrowParens": "avoid",
  //  prettier-在对象,数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.bracketSpacing": true,
  // --------------------------格式化支持的文件后缀----------------------------
  // vue文件交给vetur插件格式化
  // "[vue]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  /***********************  prettier的配置 end ***********************/

  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.scriptInitialIndent": true, // js部分是否有初始缩进
  "vetur.format.styleInitialIndent": true, // css部分是否有初始缩进
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false,
  // 这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // JS统一用prettier来格式
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.sass": "sass-formatter",

  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 100, // No line exceeds 100 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "prettier": {
      "semi": false, // 是否在每行末尾添加分号
      "singleQuote": true // 使用单引号
    },
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple", // 属性折行对齐方式
      "wrap_attributes_mode": "auto",
      "wrap-line-length": 95,
      "wrapped_attributes_per_line": "multiple",
      "wrapped_attributes_indent": "auto",
      "wrapped_attributes_end": "auto",
      "end_with_newline": false
    }
  },
  "terminal.integrated.defaultProfile.windows": "Command Prompt"
}

3、特别注意 setting.json中的prettier部分配置没有生效,自动保存格式还是在json后添加了,,原来是格式化规则代码在不同文件不同位置时优先级不同的问题。
image.png 在package.json添加配置如下配置,完美解决格式化问题。

"prettier": {
        "singleQuote": true, // 使用单引号
        "printWidth": 115,
        "proseWrap": "always",
        "semi": false, // 不加分号
        "trailingComma": "none", // 结尾处不加逗号
        "htmlWhitespaceSensitivity": "ignore" // 忽略'>'下落问题
    },

参看链接:https://blog.csdn.net/qq_44180688/article/details/119823767