22 07 2021

HbuilderX安装eslint插件,保存时会自动触发eslint验证,怎么进行自动格式化呢

一.安装这两个eslint-js和eslint-plugin-vue插件

edc3f8ddd87943d05ffa7993d0b51aef.png

二.配置eslint-plugin-vue,在菜单栏选择工具->插件配置->eslint-plugin-vue分别配置package.json和.eslintrc.js

配置package.json文件,在验证文件时加入修复命令"--fix",最新版hbuilderx不需要配置,直接在设置中启用

7a70923d7f7b831472247ffadbe0e62b.png

配置.eslintrc.js文件

//更详细的配置文档请参考:https://github.com/vuejs/eslint-plugin-vue#gear-configs
module.exports = {
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: "module"
  },
  globals: {
    "plus": true,
    "uni": true,
    "getCurrentPages": true,
    "process":true,
  },
  extends: ["plugin:vue/recommended", "eslint:recommended"],
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/name-property-casing": ["error", "PascalCase"],
    "vue/no-v-html": "off",
    "vue/script-indent": ["error", 2, { "baseIndent": 1, "SwitchCase": 1 }],
    "accessor-pairs": 2,
    "arrow-spacing": [2, {
      "before": true,
      "after": true
    }],
    "block-spacing": [2, "always"],
    "brace-style": [2, "1tbs", {
      "allowSingleLine": true
    }],
    "camelcase": [0, {
      "properties": "always"
    }],
    "comma-dangle": [2, "never"],
    "comma-spacing": [2, {
      "before": false,
      "after": true
    }],
    "comma-style": [2, "last"],
    "constructor-super": 2,
    "curly": [2, "multi-line"],
    "dot-location": [2, "property"],
    "eol-last": 2,
    "eqeqeq": "off",
    "generator-star-spacing": [2, {
      "before": true,
      "after": true
    }],
    "handle-callback-err": [2, "^(err|error)$"],
    "indent": [2, 2, {
      "SwitchCase": 1
    }],
    "jsx-quotes": [2, "prefer-single"],
    "key-spacing": [2, {
      "beforeColon": false,
      "afterColon": true
    }],
    "keyword-spacing": [2, {
      "before": true,
      "after": true
    }],
    "new-cap": [2, {
      "newIsCap": true,
      "capIsNew": false
    }],
    "new-parens": 2,
    "no-array-constructor": 2,
    "no-caller": 2,
    "no-console": "off",
    "no-class-assign": 2,
    "no-cond-assign": 2,
    "no-const-assign": 2,
    "no-control-regex": 0,
    "no-delete-var": 2,
    "no-dupe-args": 2,
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-empty-character-class": 2,
    "no-empty-pattern": 2,
    "no-eval": 2,
    "no-ex-assign": 2,
    "no-extend-native": 2,
    "no-extra-bind": 2,
    "no-extra-boolean-cast": 2,
    "no-extra-parens": [2, "functions"],
    "no-fallthrough": 2,
    "no-floating-decimal": 2,
    "no-func-assign": 2,
    "no-implied-eval": 2,
    "no-inner-declarations": [2, "functions"],
    "no-invalid-regexp": 2,
    "no-irregular-whitespace": 2,
    "no-iterator": 2,
    "no-label-var": 2,
    "no-labels": [2, {
      "allowLoop": false,
      "allowSwitch": false
    }],
    "no-lone-blocks": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-multi-spaces": 2,
    "no-multi-str": 2,
    "no-multiple-empty-lines": [2, {
      "max": 1
    }],
    "no-native-reassign": 2,
    "no-negated-in-lhs": 2,
    "no-new-object": 2,
    "no-new-require": 2,
    "no-new-symbol": 2,
    "no-new-wrappers": 2,
    "no-obj-calls": 2,
    "no-octal": 2,
    "no-octal-escape": 2,
    "no-path-concat": 2,
    "no-proto": 2,
    "no-redeclare": 2,
    "no-regex-spaces": 2,
    "no-return-assign": [2, "except-parens"],
    "no-self-assign": 2,
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-shadow-restricted-names": 2,
    "no-spaced-func": 2,
    "no-sparse-arrays": 2,
    "no-this-before-super": 2,
    "no-throw-literal": 2,
    "no-trailing-spaces": 2,
    "no-undef": 2,
    "no-undef-init": 2,
    "no-unexpected-multiline": 2,
    "no-unmodified-loop-condition": 2,
    "no-unneeded-ternary": [2, {
      "defaultAssignment": false
    }],
    "no-unreachable": 2,
    "no-unsafe-finally": 2,
    "no-unused-vars": [2, {
      "vars": "all",
      "args": "none"
    }],
    "no-useless-call": 2,
    "no-useless-computed-key": 2,
    "no-useless-constructor": 2,
    "no-useless-escape": 0,
    "no-whitespace-before-property": 2,
    "no-with": 2,
    "one-var": [2, {
      "initialized": "never"
    }],
    "operator-linebreak": [2, "after", {
      "overrides": {
        "?": "before",
        ":": "before"
      }
    }],
    "padded-blocks": [2, "never"],
    "quotes": [2, "single", {
      "avoidEscape": true,
      "allowTemplateLiterals": true
    }],
    "semi": [2, "never"],
    "semi-spacing": [2, {
      "before": false,
      "after": true
    }],
    "space-before-blocks": [2, "always"],
    "space-before-function-paren": [2, "never"],
    "space-in-parens": [2, "never"],
    "space-infix-ops": 2,
    "space-unary-ops": [2, {
      "words": true,
      "nonwords": false
    }],
    "spaced-comment": [2, "always", {
      "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]
    }],
    "template-curly-spacing": [2, "never"],
    "use-isnan": 2,
    "valid-typeof": 2,
    "wrap-iife": [2, "any"],
    "yield-star-spacing": [2, "both"],
    "yoda": [2, "never"],
    "prefer-const": 2,
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    "object-curly-spacing": [2, "always", {
      "objectsInObjects": false
    }],
    "array-bracket-spacing": [2, "never"]
  },
  overrides: [{
    "files": ["*.vue"],
    "rules": {
      "indent": "off"
    }
  }]
};

三.配置eslint-js,在菜单栏选择工具->插件配置->eslint-js分别配置package.json和.eslintrc.js

配置package.json文件,在验证文件时加入修复命令"--fix",最新版hbuilderx不需要配置,直接在设置中启用

56acebf362cc34929ba108071500b17d.png

配置.eslintrc.js文件

//详细配置教程请参考:http://eslint.cn/docs/user-guide/configuring
module.exports = {
  "plugins": [
    "html"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "allowImportExportEverywhere": false
  },
  globals: {
    "plus": true,
    "uni": true,
    "getCurrentPages": true,
    "process":true,
  },
  extends: ["plugin:vue/recommended", "eslint:recommended"],
  rules: {
    "accessor-pairs": 2,
    "arrow-spacing": [2, {
      "before": true,
      "after": true
    }],
    "block-spacing": [2, "always"],
    "brace-style": [2, "1tbs", {
      "allowSingleLine": true
    }],
    "camelcase": [0, {
      "properties": "always"
    }],
    "comma-dangle": [2, "never"],
    "comma-spacing": [2, {
      "before": false,
      "after": true
    }],
    "comma-style": [2, "last"],
    "constructor-super": 2,
    "curly": [2, "multi-line"],
    "dot-location": [2, "property"],
    "eol-last": 2,
    "eqeqeq": "off",
    "generator-star-spacing": [2, {
      "before": true,
      "after": true
    }],
    "handle-callback-err": [2, "^(err|error)$"],
    "indent": [2, 2, {
      "SwitchCase": 1
    }],
    "jsx-quotes": [2, "prefer-single"],
    "key-spacing": [2, {
      "beforeColon": false,
      "afterColon": true
    }],
    "keyword-spacing": [2, {
      "before": true,
      "after": true
    }],
    "new-cap": [2, {
      "newIsCap": true,
      "capIsNew": false
    }],
    "new-parens": 2,
    "no-array-constructor": 2,
    "no-caller": 2,
    "no-console": "off",
    "no-class-assign": 2,
    "no-cond-assign": 2,
    "no-const-assign": 2,
    "no-control-regex": 0,
    "no-delete-var": 2,
    "no-dupe-args": 2,
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-empty-character-class": 2,
    "no-empty-pattern": 2,
    "no-eval": 2,
    "no-ex-assign": 2,
    "no-extend-native": 2,
    "no-extra-bind": 2,
    "no-extra-boolean-cast": 2,
    "no-extra-parens": [2, "functions"],
    "no-fallthrough": 2,
    "no-floating-decimal": 2,
    "no-func-assign": 2,
    "no-implied-eval": 2,
    "no-inner-declarations": [2, "functions"],
    "no-invalid-regexp": 2,
    "no-irregular-whitespace": 2,
    "no-iterator": 2,
    "no-label-var": 2,
    "no-labels": [2, {
      "allowLoop": false,
      "allowSwitch": false
    }],
    "no-lone-blocks": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-multi-spaces": 2,
    "no-multi-str": 2,
    "no-multiple-empty-lines": [2, {
      "max": 1
    }],
    "no-native-reassign": 2,
    "no-negated-in-lhs": 2,
    "no-new-object": 2,
    "no-new-require": 2,
    "no-new-symbol": 2,
    "no-new-wrappers": 2,
    "no-obj-calls": 2,
    "no-octal": 2,
    "no-octal-escape": 2,
    "no-path-concat": 2,
    "no-proto": 2,
    "no-redeclare": 2,
    "no-regex-spaces": 2,
    "no-return-assign": [2, "except-parens"],
    "no-self-assign": 2,
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-shadow-restricted-names": 2,
    "no-spaced-func": 2,
    "no-sparse-arrays": 2,
    "no-this-before-super": 2,
    "no-throw-literal": 2,
    "no-trailing-spaces": 2,
    "no-undef": 2,
    "no-undef-init": 2,
    "no-unexpected-multiline": 2,
    "no-unmodified-loop-condition": 2,
    "no-unneeded-ternary": [2, {
      "defaultAssignment": false
    }],
    "no-unreachable": 2,
    "no-unsafe-finally": 2,
    "no-unused-vars": [2, {
      "vars": "all",
      "args": "none"
    }],
    "no-useless-call": 2,
    "no-useless-computed-key": 2,
    "no-useless-constructor": 2,
    "no-useless-escape": 0,
    "no-whitespace-before-property": 2,
    "no-with": 2,
    "one-var": [2, {
      "initialized": "never"
    }],
    "operator-linebreak": [2, "after", {
      "overrides": {
        "?": "before",
        ":": "before"
      }
    }],
    "padded-blocks": [2, "never"],
    "quotes": [2, "single", {
      "avoidEscape": true,
      "allowTemplateLiterals": true
    }],
    "semi": [2, "never"],
    "semi-spacing": [2, {
      "before": false,
      "after": true
    }],
    "space-before-blocks": [2, "always"],
    "space-before-function-paren": [2, "never"],
    "space-in-parens": [2, "never"],
    "space-infix-ops": 2,
    "space-unary-ops": [2, {
      "words": true,
      "nonwords": false
    }],
    "spaced-comment": [2, "always", {
      "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]
    }],
    "template-curly-spacing": [2, "never"],
    "use-isnan": 2,
    "valid-typeof": 2,
    "wrap-iife": [2, "any"],
    "yield-star-spacing": [2, "both"],
    "yoda": [2, "never"],
    "prefer-const": 2,
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    "object-curly-spacing": [2, "always", {
      "objectsInObjects": false
    }],
    "array-bracket-spacing": [2, "never"]
  },
  overrides: [{
    "files": ["*.vue"],
    "rules": {
      "indent": "off"
    }
  }]
};

四.统一eslint和hbuilderx格式化风格

工具->设置->源码视图->用户设置

{
    "editor.codeassist" : true,
    "editor.insertSpaces" : true,
    "editor.longLineIndicator" : true,
    "editor.longLineIndicatorColumn" : 160,
    "editor.tabSize" : 2
}

配置插件format下jsbeautifyrc.js文件

module.exports = {
  parsers: {
    '.js': 'js',
    '.json': 'js',
    '.njs': 'js',
    '.sjs': 'js',
    '.wxs': 'js',
    '.css': 'css',
    '.scss': 'css',
    '.nss': 'css',
    '.wxss': 'css',
    '.acss': 'css',
    '.ttss': 'css',
    '.qss': 'css',
    '.html': 'html',
    '.ux': 'html',
    '.wxml': 'html',
    '.nml': 'html',
    '.vue': 'html',
    '.nvue': 'html',
    '.axml': 'html',
    '.swan': 'html',
    '.ttml': 'html',
    '.qml': 'html'
  },
  options: {
    'indent_size': '2',
    'indent_char': ' ',
    'indent_with_tabs': false, // 使用tab缩进
    'eol': '\r\n', // 行结束符
    'end_with_newline': false, // 使用换行结束输出
    'indent_level': 0, // 起始代码缩进数
    'preserve_newlines': true, // 保留空行
    'max_preserve_newlines': null, // 最大连续保留换行符个数。比如设为2,则会将2行以上的空行删除为只保留1行
    'space_in_paren': false, // 括弧添加空格 示例 f( a, b )
    'space_in_empty_paren': false, // 函数的括弧内没有参数时插入空格 示例 f( )
    'jslint_happy': false, // 启用jslint-strict模式
    'space_after_anon_function': false, // 匿名函数的括号前加空格
    'brace_style': 'collapse,preserve-inline', // 代码样式,可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline
    'unindent_chained_methods': false, // 不缩进链式方法调用
    'break_chained_methods': false, // 在随后的行中断开链式方法调用
    'keep_array_indentation': true, // 保持数组缩进
    'unescape_strings': false, // 使用xNN符号编码解码可显示的字符
    'wrap_line_length': 160,
    'e4x': false, // 支持jsx
    'comma_first': false, // 把逗号放在新行开头,而不是结尾
    'operator_position': 'before-newline',
    'unformatted': ['wbr'],
    'html': {
      'wrap_attributes': 'preserve',
      'indent_handlebars': true,
      'indent_inner_html': true,
      'indent-scripts': 'normal', // [keep|separate|normal]
      'extra_liners': [] // 配置标签列表,需要在这些标签前面额外加一空白行
    }
  }
}
发表评论