VScode中Eslint的格式化是按照什么规则执行的呢

  • Z时代
  • 2024-02-18
  • 分类：IT

这是我的.eslintrc.js中的一部分规则

module.exports = {
  parserOptions: {
    parser: 'babel-eslint', // 采用 babel-eslint 作为语法解析器
    sourceType: 'module', // 指定来源的类型，有两种script或module
    ecmaVersion: 6 // 指定ECMAScript支持的版本，6为ES6
  },
  env: {
    browser: true, // 设置为所需检查的代码是在浏览器环境运行的
    es6: true, // 设置所需检查代码为 es6 语法书写
    node: true
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'], // 扩展使用 vue 检查规则和eslint推荐规则
  rules: {
    'vue/attribute-hyphenation': 0, // 忽略属性连字
    'vue/max-attributes-per-line': [2, { singleline: 10, multiline: { max: 1, allowFirstLine: false }}],
    'vue/singleline-html-element-content-newline': 'off', // 单行html元素内容在新的一行
    'vue/multiline-html-element-content-newline': 'off', // 多行html元素内容在新的一行
    'vue/html-closing-bracket-newline': 'off', // html右括号在新的一行
    'vue/no-v-html': 'off', // 不使用v-html
    'vue/html-self-closing': 0, // 忽略html标签自闭合
    'accessor-pairs': 2, // 应同时设置setter和getter
    'arrow-spacing': [2, { before: true, after: true }], // 箭头间距
    'vue/require-default-prop': 0, // 不检查默认属性
    'vue/require-prop-types': 0, // 不检查默认类型
    'block-spacing': [2, 'always'], // 块间距
    'brace-style': [2, '1tbs', { allowSingleLine: true }], // 大括号样式允许单行
    'camelcase': 0, // 为属性强制执行驼峰命名
    'comma-dangle': [0, 'never'], // 逗号悬挂
}

这是格式化的方式及vscode中eslint的配置
VScode中Eslint的格式化是按照什么规则执行的呢

 // vetur
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  // Eslint
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  /* eslint的配置 */
  "eslint.run": "onSave",
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true // 保存时自动修复
  },
  // 关闭 vscode 默认的检查工具
  "html.validate.scripts": false,
  "javascript.validate.enable": false,
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "scss.lint.duplicateProperties": "error",
  "css.lint.duplicateProperties": "error",
  "less.lint.zeroUnits": "error",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    "vue",
    "html"
  ],
  /*  prettier的配置 */
  "prettier.jsxSingleQuote": true,
  // "prettier.configPath": ".prettierrc.js",
  "prettier.printWidth": 120, // 超过最大值换行
  "prettier.tabWidth": 2, // 缩进字节数
  "prettier.useTabs": true, // 缩进使用tab
  "prettier.semi": false, // 句尾添加分号
  "prettier.singleQuote": true, // 使用单引号代替双引号
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.requireConfig": false, // Require a "prettierconfig" to format prettier
  "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号
  /* 每种语言默认的格式化规则 */
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 默认格式化方案
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },

为什么我每次格式化文档总会把连体命名更换为驼峰命名

Vue.component('svg-icon', SvgIcon)
Vue.component('SvgIcon', SvgIcon)

小标题

以上是 VScode中Eslint的格式化是按照什么规则执行的呢 的全部内容， 来源链接： utcz.com/p/935469.html

回到顶部