返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue 如何配置eslint代码检查
  • 883
分享到

vue 如何配置eslint代码检查

2024-04-02 19:04:59 883人浏览 薄情痞子
摘要

目录1.安装依赖2.WEBstORM代码格式化快捷键为win + alt + L3.设置webstorm校验规则为本地项目安装的eslint4.在项目本地新建.editorconfi

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"]
  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue 如何配置eslint代码检查

本文链接: https://lsjlt.com/news/145918.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue 如何配置eslint代码检查
    目录1.安装依赖2.webstorm代码格式化快捷键为win + alt + L3.设置webstorm校验规则为本地项目安装的eslint4.在项目本地新建.editorconfi...
    99+
    2024-04-02
  • vue如何关闭eslint代码检查
    这篇文章给大家分享的是有关vue如何关闭eslint代码检查的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。关闭 eslint 代码检查很多人说关闭eslint检查的方式是注释掉 ...
    99+
    2024-04-02
  • JS代码检查工具ESLint怎么用
    这篇文章主要介绍了JS代码检查工具ESLint怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。ESLint不但提供一些默认的规则,也提供...
    99+
    2024-04-02
  • Eslint代码检查的方法有哪些
    本篇内容介绍了“Eslint代码检查的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一:理解代码...
    99+
    2024-04-02
  • 如何关闭ESlint语法检测配置
    小编给大家分享一下如何关闭ESlint语法检测配置,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!刚刚开始的小伙伴是不是空格报错少...
    99+
    2024-04-02
  • vscode怎么配置eslint+prettier来格式化Vue代码
    这篇文章给大家分享的是有关vscode怎么配置eslint+prettier来格式化Vue代码的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。项目背景 : vue-cli 先安装好这三个插件,然后根据配置清单按需配...
    99+
    2023-06-15
  • 如何检查JavaScript代码
    在现今的网络应用中,JavaScript 是一个极其重要的角色,而 JavaScript 的代码检查是确保应用程序质量、可靠性和可维护性的一个关键过程。在这篇文章中,我们将探讨如何检查 JavaScript 代码的方法和技术。使用 Lint...
    99+
    2023-05-20
  • javascript代码如何在检查
    在编写JavaScript代码时,有时候我们需要进行代码检查来确保代码的质量和可读性。代码检查可以帮助我们发现一些可能出现的错误和不规范的写法,这样早期发现问题可以让我们更快地修复问题,从而减少不必要的开发成本。在本文中,我将介绍如何使用两...
    99+
    2023-05-16
  • vue如何关闭eslint检测(多种方法)
    目录一、问题描述二、问题解决一、问题描述 我们在开发vue项目的时候,创建的时候可能会不小心选择了eslint,这个检测规则对于新手来说,简直就是噩梦,会让你崩溃。所以如果不想让es...
    99+
    2024-04-02
  • 如何配置eslint规范项目
    这篇文章给大家分享的是有关如何配置eslint规范项目的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。为什么要使用eslint你在接手一个项目的维护迭代任务,阅读代码的时候是否会因...
    99+
    2024-04-02
  • vue2项目增加eslint配置代码规范示例
    目录正文1.安装以下eslint插件1.1 .eslintrc.js文件配置1.2 .eslintignore文件的配置2. 安装prettier3. package.json相关代...
    99+
    2022-11-13
    vue2代码规范eslint配置 vue2代码规范配置 vue2 eslint
  • vue-cli构建的项目如何手动添加eslint配置
    目录package.json里配置添加根目录下添加检测配置js文件.eslintrc.js添加忽略检测配置文件.eslintignorewebpack.base.conf.js ru...
    99+
    2024-04-02
  • Node.js ESLint配置详解:如何自定义你的ESlint规则
    1. ESLint简介 ESLint是一个开源的JavaScript代码风格检查工具,它可以帮助你确保代码的准确性和一致性。ESLint通过一组预定义的规则来检查你的代码,并提供相应的错误或警告信息。这些规则涵盖了各种代码风格问题,包括...
    99+
    2024-02-13
    Node.js ESLint 代码风格 代码质量 自定义规则
  • 如何使用eslint和editorconfig规范代码
    这篇文章主要为大家展示了“如何使用eslint和editorconfig规范代码”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用eslint和editor...
    99+
    2024-04-02
  • Node.js ESLint教程:如何使用ESlint让你的代码更规范
    一、安装 ESLint 首先,您需要安装 ESLint。您可以通过以下命令在全球范围内安装 ESLint: npm install -g eslint 二、配置 ESLint 安装完成后,您需要为您的 Node.js 项目配置 ESLi...
    99+
    2024-02-13
     ESLint Node.js 代码检查 代码质量 代码可维护性
  • vscode中如何配置并使用.vue代码模板
    本篇内容介绍了“vscode中如何配置并使用.vue代码模板”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vscode里使用.vue代码模板...
    99+
    2023-06-25
  • vue如何配置跨域代理
    这篇文章主要介绍了vue如何配置跨域代理,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。导语:首先,每一个前端开发人员都应该知道同源策略,同源...
    99+
    2024-04-02
  • vue中如何配置proxy代理
    目录vue配置proxy代理proxy常用参数说明关于/api的详解部署因为/api无法请求到数据总结vue配置proxy代理如果你的前端应用和后端 API 服务器没有运行在同一个主...
    99+
    2023-01-14
    vue配置proxy代理 vue配置代理 proxy代理配置
  • js代码格式化工具eslint如何使用
    这篇文章主要介绍“js代码格式化工具eslint如何使用”,在日常操作中,相信很多人在js代码格式化工具eslint如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js代码格式化工具eslint如何使用...
    99+
    2023-06-26
  • vue-cli中如何配置反向代理
    这篇文章主要介绍“vue-cli中如何配置反向代理”,在日常操作中,相信很多人在vue-cli中如何配置反向代理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue-cli中如何配置反向代理”的疑惑有所帮助!...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作