eslint配置解读

主要介绍一些常规的eslint配置属性,及如何查看对应eslint插件的具体规则配置内容。

extend配置

常见的extend配置解析

{
    extends: ['plugin:vue/recommended']
}

也可以写成

{
	plugins: ['eslint-plugin-vue']
}

eslint插件命名规则:惯例是使用不带 eslint-plugin- 前缀的 npm 包名称。plugin:vue/recommended:表示该插件为eslint官方插件eslint-plugin-vuerecommended配置集。

下面介绍一下如何查看该eslint插件具体有哪些配置内容:

1、在本地node_modules下查找到eslint-plugin-vue

2、查看该包下package.json中的main字段,查找默认导出文件。经查看为:"main": "lib/index.js"

3、查看当前包下,lib文件夹下的index.js文件,查看具体的配置内容

module.exports = {
  rules: {
    'array-bracket-spacing': require('./rules/array-bracket-spacing'),
    'arrow-spacing': require('./rules/arrow-spacing'),
    'attribute-hyphenation': require('./rules/attribute-hyphenation'),
    'attributes-order': require('./rules/attributes-order'),
    'block-spacing': require('./rules/block-spacing'),
    'brace-style': require('./rules/brace-style'),
    'camelcase': require('./rules/camelcase'),
    'comma-dangle': require('./rules/comma-dangle'),
    'comment-directive': require('./rules/comment-directive'),
    'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
    'eqeqeq': require('./rules/eqeqeq'),
    'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
    'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),
    'html-end-tags': require('./rules/html-end-tags'),
    'html-indent': require('./rules/html-indent'),
    'html-quotes': require('./rules/html-quotes'),
    'html-self-closing': require('./rules/html-self-closing'),
    'jsx-uses-vars': require('./rules/jsx-uses-vars'),
    'key-spacing': require('./rules/key-spacing'),
    'match-component-file-name': require('./rules/match-component-file-name'),
    'max-attributes-per-line': require('./rules/max-attributes-per-line'),
    'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
    'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
    'name-property-casing': require('./rules/name-property-casing'),
    'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
    'no-boolean-default': require('./rules/no-boolean-default'),
    'no-confusing-v-for-v-if': require('./rules/no-confusing-v-for-v-if'),
    'no-dupe-keys': require('./rules/no-dupe-keys'),
    'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
    'no-multi-spaces': require('./rules/no-multi-spaces'),
    'no-parsing-error': require('./rules/no-parsing-error'),
    'no-reserved-keys': require('./rules/no-reserved-keys'),
    'no-restricted-syntax': require('./rules/no-restricted-syntax'),
    'no-shared-component-data': require('./rules/no-shared-component-data'),
    'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'),
    'no-spaces-around-equal-signs-in-attribute': require('./rules/no-spaces-around-equal-signs-in-attribute'),
    'no-template-key': require('./rules/no-template-key'),
    'no-template-shadow': require('./rules/no-template-shadow'),
    'no-textarea-mustache': require('./rules/no-textarea-mustache'),
    'no-unused-components': require('./rules/no-unused-components'),
    'no-unused-vars': require('./rules/no-unused-vars'),
    'no-use-v-if-with-v-for': require('./rules/no-use-v-if-with-v-for'),
    'no-v-html': require('./rules/no-v-html'),
    'object-curly-spacing': require('./rules/object-curly-spacing'),
    'order-in-components': require('./rules/order-in-components'),
    'prop-name-casing': require('./rules/prop-name-casing'),
    'require-component-is': require('./rules/require-component-is'),
    'require-default-prop': require('./rules/require-default-prop'),
    'require-direct-export': require('./rules/require-direct-export'),
    'require-prop-type-constructor': require('./rules/require-prop-type-constructor'),
    'require-prop-types': require('./rules/require-prop-types'),
    'require-render-return': require('./rules/require-render-return'),
    'require-v-for-key': require('./rules/require-v-for-key'),
    'require-valid-default-prop': require('./rules/require-valid-default-prop'),
    'return-in-computed-property': require('./rules/return-in-computed-property'),
    'script-indent': require('./rules/script-indent'),
    'singleline-html-element-content-newline': require('./rules/singleline-html-element-content-newline'),
    'space-infix-ops': require('./rules/space-infix-ops'),
    'space-unary-ops': require('./rules/space-unary-ops'),
    'this-in-template': require('./rules/this-in-template'),
    'use-v-on-exact': require('./rules/use-v-on-exact'),
    'v-bind-style': require('./rules/v-bind-style'),
    'v-on-function-call': require('./rules/v-on-function-call'),
    'v-on-style': require('./rules/v-on-style'),
    'valid-template-root': require('./rules/valid-template-root'),
    'valid-v-bind': require('./rules/valid-v-bind'),
    'valid-v-cloak': require('./rules/valid-v-cloak'),
    'valid-v-else-if': require('./rules/valid-v-else-if'),
    'valid-v-else': require('./rules/valid-v-else'),
    'valid-v-for': require('./rules/valid-v-for'),
    'valid-v-html': require('./rules/valid-v-html'),
    'valid-v-if': require('./rules/valid-v-if'),
    'valid-v-model': require('./rules/valid-v-model'),
    'valid-v-on': require('./rules/valid-v-on'),
    'valid-v-once': require('./rules/valid-v-once'),
    'valid-v-pre': require('./rules/valid-v-pre'),
    'valid-v-show': require('./rules/valid-v-show'),
    'valid-v-text': require('./rules/valid-v-text')
  },
  configs: {
    'base': require('./configs/base'),
    'essential': require('./configs/essential'),
    'no-layout-rules': require('./configs/no-layout-rules'),
    'recommended': require('./configs/recommended'),
    'strongly-recommended': require('./configs/strongly-recommended')
  },
  processors: {
    '.vue': require('./processor')
  }
}

从上面的配置文件中可以看到有哪些具体的配置规则,及配置集如baseessentialrecommended

4、打开./configs/recommended文件可查看最终的配置内容

你可能感兴趣的:(javascript,eslint)