vue 如何配置eslint代码检查

 更新时间:2022年04月14日 08:47:26   作者:_葱  
这篇文章主要介绍了vue 如何配置eslint代码检查,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

1.安装依赖

"eslint": "^5.12.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"acorn": "^6.0.5",
"babel-eslint": "^8.2.1",

2.webstorm代码格式化快捷键为win + alt + L

在webstorm preference里面找到code style,在里面设置webstorm代码快捷格式化选项。

比如这里勾选上in empty tag时,当我们按win + alt + L格式化代码时,就会自动在闭合标签前面添加空格。

如果webstorm格式化与eslint规则冲突,大多时候也可以从这里设置规则。

3.设置webstorm校验规则为本地项目安装的eslint

如下:

4.在项目本地新建.editorconfig文件

设置webstorm格式。

root = true
 
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
in_empty_tag = true

5.在项目本地新建.eslintrc.js文件

// https://eslint.org/docs/user-guide/configuring
 
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "vue/no-use-v-if-with-v-for": ["error", {
      "allowUsingIterationVar": false
    }],
    "vue/return-in-computed-property": ["error", {
      "treatUndefinedAsUnspecified": false
    }],
    "vue/no-unused-components": ["error", {
      "ignoreWhenBindingPresent": true
    }],
    "vue/attribute-hyphenation": ["error", "always", {
      "ignore": []
    }],
    "vue/component-name-in-template-casing": ["error", "kebab-case", {
      "ignores": []
    }],
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "always"
    }],
    "vue/html-closing-bracket-spacing": ["error", {
      "startTag": "never",
      "endTag": "never",
      "selfClosingTag": "always"
    }],
    "vue/html-indent": ["error", 2, {
      "attribute": 1,
      "baseIndent": 1,
      "closeBracket": 0,
      "alignAttributesVertically": true,
      "ignores": []
    }],
    "vue/html-quotes": ["error", "double"],
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "never",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }],
    "vue/max-attributes-per-line": ["error", {
      "singleline": 3,
      "multiline": {
        "max": 3,
        "allowFirstLine": true
      }
    }],
    "vue/multiline-html-element-content-newline": ["error", {
      "ignoreWhenEmpty": true,
      "ignores": ["pre", "textarea"]
    }],
    "vue/mustache-interpolation-spacing": ["error", "always"],
    "vue/name-property-casing": ["error", "kebab-case"],
    "vue/no-multi-spaces": ["error", {
      "ignoreProperties": false
    }],
    "vue/no-spaces-around-equal-signs-in-attribute": ["error"],
    "vue/no-template-shadow": ["error"],
    "vue/prop-name-casing": ["error", "camelCase"],
    "vue/require-default-prop": ["error"],
    "vue/v-bind-style": ["error", "shorthand"],
    "vue/v-on-style": ["error", "shorthand"],
    "vue/attributes-order": ["error", {
      "order": [
        "DEFINITION",
        "LIST_RENDERING",
        "CONDITIONALS",
        "RENDER_MODIFIERS",
        "GLOBAL",
        "UNIQUE",
        "TWO_WAY_BINDING",
        "OTHER_DIRECTIVES",
        "OTHER_ATTR",
        "EVENTS",
        "CONTENT"
      ]
    }],
    "vue/order-in-components": ["error", {
      "order": [
        "el",
        "name",
        "parent",
        "functional",
        ["delimiters", "comments"],
        ["components", "directives", "filters"],
        "extends",
        "mixins",
        "inheritAttrs",
        "model",
        ["props", "propsData"],
        "data",
        "computed",
        "watch",
        "LIFECYCLE_HOOKS",
        "methods",
        ["template", "render"],
        "renderError"
      ]
    }],
    "vue/this-in-template": ["error", "never"]
  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 基于Vue3+Three.js实现一个3D模型可视化编辑系统

    基于Vue3+Three.js实现一个3D模型可视化编辑系统

    这篇文章主要介绍了基于Vue3+Three.js实现一个3D模型可视化编辑系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue消息提示this.$message方法使用解读

    Vue消息提示this.$message方法使用解读

    这篇文章主要介绍了Vue消息提示this.$message方法使用,具有很好的参考价值,希望对大家有所帮助,
    2023-09-09
  • 关于Vue中axios的封装实例详解

    关于Vue中axios的封装实例详解

    这篇文章主要给大家介绍了关于Vue中axios的封装的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-10-10
  • Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享,数据缓存等等,下面这篇文章主要给大家介绍了关于Vuex(多组件数据共享的Vue插件)搭建与使用的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue组件之间的通信方式(推荐!)

    Vue组件之间的通信方式(推荐!)

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下
    2022-06-06
  • 详解Vue CLI3配置解析之css.extract

    详解Vue CLI3配置解析之css.extract

    这篇文章主要介绍了详解Vue CLI3配置解析之css.extract,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue中keep-alive组件的入门使用教程

    vue中keep-alive组件的入门使用教程

    这篇文章主要给大家介绍了关于vue中keep-alive组件的入门使用教程,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Vue使用Vue-cropper实现图片裁剪

    Vue使用Vue-cropper实现图片裁剪

    这篇文章主要为大家详细介绍了Vue使用Vue-cropper实现图片裁剪,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • vue中的el-button样式自定义方式

    vue中的el-button样式自定义方式

    这篇文章主要介绍了vue中的el-button样式自定义方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • VUE表格显示错位的两种解决思路分享

    VUE表格显示错位的两种解决思路分享

    这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论