全局配置Eslint实现Standard标准,以遍在各个Vue项目通用

这篇具有很好参考价值的文章主要介绍了全局配置Eslint实现Standard标准,以遍在各个Vue项目通用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

转载于我个人博客

至于为什么我这种接触前端没几天的新手要浅谈这个,说来话长。🤯
鏖战半天才出配置好全部的eslint设置。为了保持standard标准的js代码格式,并且可以在vue项目中检查(同时可以检查.vue文件),不得不使用eslint进行代码检查。

本文将介绍全局eslint配置,实现standard标准,使得在之后用Vue-cil创建项目时可以不配置代码检查,减小项目体积

Eslint的配置

而在配置eslint的过程中,我希望把语法检查和项目分离,毕竟语法检查不应该是项目的内容,而是程序员自己的个人配置,所以我希望把eslint安装在全局环境,在我用vscode写代码时,所有js脚本,web项目,都可以自适应的进行检查。但是就这样简单的需求,实现的却非常坎坷😅

为了完成这个目标,需要一下几步:

  • 安装eslint的vscod插件
  • 全局安装eslint以及相关的组件
  • 创建并填写.eslintrc.js文件
  • 修改vscode-eslint插件的设置

安装eslint的vscod插件

在vscode中,eslint的提示通过下面这个插件显示,安装即可,这一步还算正常
vue/cli 中的 eslint-stand 是 eslint哪一种规范?,vue.js,前端,javascript,代码规范

全局安装eslint以及相关的组件

关于npm的配置和全局包的保存位置就不赘述,直接进行全局安装相关包,我是放在了C:/nodejs/node_global/node_modules的位置。
先全局安装全部需要的包:

npm install eslint  eslint-plugin-html eslint-plugin-vue eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-n -g

因为要使得代码符合standard的标准,知道需要依赖这些包能实现standard标准也是费了不少功夫,最后还是直接让vue-cil创建一个局部安装eslint的项目,通过看它的package.json来看依赖的包,真抽象。

如果无所谓是不是standard标准,只安装eslint和它的vue、html插件就好了:

npm install eslint  eslint-plugin-html eslint-plugin-vue -g

我的最终全局包截图

vue/cli 中的 eslint-stand 是 eslint哪一种规范?,vue.js,前端,javascript,代码规范

创建并填写.eslintrc.js文件

在刚才全局安装包的位置创建这个文件,其中写入配置,这将作为全局的eslint配置。

我的配置如下:

module.exports = {
  root: true,
  parserOptions: {
    parser: '@babel/eslint-parser',
    // 指定使用的 JavaScript 语言特性,通常与你的项目需求一致
    sourceType: 'module', // 或 'script'
    requireConfigFile: false// 禁用配置文件检查
  },
  env: {
    es6: true,
    browser: true,
    node: true
  },
  **// https://github.com/standard/standard/blob/master/docs/RULES-en.md**
  extends: [
    'standard',
    'plugin:vue/vue3-essential'
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'vue'
  ],
  /**
       * 每个规则有【3】个错误级别。
       * off或0: 关闭该规则;
       * warn或1: 开启规则,使用警告级别的错误,不会导致程序退出;
       * error或2: 开启规则,使用错误级别的错误,当被触发的时候,程序会退出。
       */
  rules: {
    // 关闭驼峰命名检查
    camelcase: 'off',
    // 允许单词组件名
    'vue/multi-word-component-names': 0
    /*
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    quotes: [0, "single"],
    // 要求操作符周围有空格
    "space-infix-ops": 0,
    // 要求或禁止使用分号代替 ASI
    semi: 0,
    // 强制函数中的变量要么一起声明要么分开声明
    "one-var": 0,
    // 强制在 function的左括号之前使用一致的空格
    "space-before-function-paren": 0,
    // 强制在逗号前后使用一致的空格
    "comma-spacing": 0,
    // 强制在注释中 // 或 /* 使用一致的空格
    "spaced-comment": 0,
    // 要求或禁止块内填充
    "padded-blocks": 0,
    // 强制在关键字前后使用一致的空格
    "keyword-spacing": 0,
    // 要求或禁止末尾逗号
    "comma-dangle": 1,
    // 要求使用 === 和 !==
    eqeqeq: 1
    */
  }
}

每次修改配置后需要重启vscode才生效。

这个配置是真的折磨,各种报错,但也在不断的报错中,知道了1.哪些依赖包要安装2.插件拓展怎么添加3.解释器的选择

  1. 根据报错信息已经知道全部要的包了,虽然折磨
  2. eslint-config-xxx这是拓展(extend)文件的包,在配置文件中只用写xxx即可,eslint-plugin-xxx是插件的包,在配置文件的插件(plugins)中也只用写xxx。所以要实现standard标准,需要的不是standard本身这个包而是eslint相关的包。
  3. 可以看到,我添加了解释器选项,也可以不添加

parserOptions: {
parser: ‘@babel/eslint-parser’,
// 指定使用的 JavaScript 语言特性,通常与你的项目需求一致
sourceType: ‘module’, // 或 ‘script’
requireConfigFile: false// 禁用配置文件检查
}

我使用了babel的解释器,如果使用,就必要要额外全局安装一个包:@babel/eslint-parser注意,这是2023年的要求,以前的各种帖子说安装babel-eslint的早过时了,安装了后也需要开启禁用配置文件检查,不然会检测你的babel的配置文件,这个自然是没有的,毕竟全局,不在项目里。

另一方面,在不断的查阅资料中发现,Standard官方已经不推荐使用eslint-config-standard等一系列包来进行实现standard标准了,它有自己的vscode插件,有自己的生态,作为代码检查工具,也更轻量,主打无配置文件,即拿即用

配置文件中我写明了Standard的项目地址

// https://github.com/standard/standard/blob/master/docs/RULES-en.md

这个vscode也有相关插件,但是只能应用于JavaScript代码
StandardJS本身不直接支持Vue文件,因为它主要关注于纯JavaScript文件的规范。要在Vue.js项目中使用StandardJS规范,需要结合使用ESLint,因为ESLint可以与Vue文件一起使用,并且可以配置它来修改StandardJS规范。
vue/cli 中的 eslint-stand 是 eslint哪一种规范?,vue.js,前端,javascript,代码规范

如果只要写js代码,完全可以使用 StandardJS 而不使用 ESLint 或其他代码规范工具。StandardJS 提供了一种简单的、零配置的方式来规范 JavaScript 代码风格,它强调一种一致和简单的编码风格,不需要手动配置规则或插件。

修改vscode-eslint插件的设置

最后为了实现全局设置,需要将vscode的eslint插件的setting文件进行设置,将安装的eslint包的插件(eslint-plugin-xxx)默认指向全局包的安装文件夹,把配置文件默认指向刚才创建的文件。

同时也可以添加是否默认自动修复,可选。

    // ESLint 自动修复
    "editor.codeActionsOnSave":{
    "source.fixAll": true
    },
    //插件位置
    "eslint.nodePath": "C:/nodejs/node_global/node_modules",
    "eslint.options": {
        // 全局配置文件位置
        "overrideConfigFile": "C:/nodejs/node_global/node_modules/.eslintrc.js",  
    },

完成了以上操作,应该就配置成功了,接下来vue-cil创建项目时就可以不安装任何eslint相关的依赖了!虽然现在说明简单,过程还是折磨的,访问了各大论坛,看了好多官方文档。web时刻在发展,很可能别人说的方法,官方如今已经不支持了,需要最新信息。

关注Eslint的输出,这样才是正确的运行状态:
vue/cli 中的 eslint-stand 是 eslint哪一种规范?,vue.js,前端,javascript,代码规范

最后附上几个报错和解决:

Parsing error: AST is missing range information

你正在使用的解析器可能存在问题或不完全支持某些特定的语法结构,更换解释器即可。

Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): “jsx”, “flow”, “typescript”.

在设置中把解释器的选择包含在其中,而不要写在外面
具体:
parserOptions: {
parser: ‘@babel/eslint-parser’
}

参考资料

实践:ESLint在Vue项目中的使用
vscode 中全局配置 eslint
Visual Studio Code 配置 ESLint 规范前端编码
eslint-plugin-standard的废除
Standard官方项目文章来源地址https://www.toymoban.com/news/detail-790874.html

到了这里,关于全局配置Eslint实现Standard标准,以遍在各个Vue项目通用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • peer eslint-plugin-vue@“^7.0.0“ from @vue/eslint-config-standard@6.1.0

    问题:         用vue/cli脚手架安装项目时,选择ESlint,再安装依赖包的时候,会报以下错误, 原因:         npmV7 之前的版本遇到依赖冲突时,会忽视冲突,继续安装;         npmV7版本开始不再自动忽视依赖冲突,需要用户手动输入命令。 解决办法: (1)在每次安

    2024年01月24日
    浏览(37)
  • 深入理解高级加密标准(Advanced Encryption Standard)

    title: 深入理解高级加密标准(Advanced Encryption Standard) date: 2024/4/23 20:04:36 updated: 2024/4/23 20:04:36 tags: AES概述 加密原理 优势特点 算法详解 安全性 应用实践 案例分析 AES的历史和背景 历史:  高级加密标准(Advanced Encryption Standard,AES)是一种对称密钥加密标准,由美国国(A

    2024年04月24日
    浏览(34)
  • Elasticsearch:Standard Text Analyzer - 标准文本分析器

    Elasticsearch 提供了超过很多开箱即用的分析器,我们可以在文本分析阶段使用它们。 这些分析器很可能足以满足基本情况,但如果需要创建自定义分析器,可以通过使用构成该模块的所需组件实例化一个新的分析器模块来实现。 下表列出了 Elasticsearch 为我们提供的分析器:

    2023年04月26日
    浏览(99)
  • 解决报错:[plugin:vite-plugin-eslint] Failed to load config “standard“ to extend from.

    解决方案一: eslint插件没有全部安装,安装以下插件: 解决方案二: 注释.eslintrc.cjs 文件中的standard,去掉standard后可能一些eslint标准配置就失效了,建议通过方案一方式解决。

    2024年03月12日
    浏览(68)
  • 如何规范团队代码,小程序ESLint+Prettier+lint-staged+commit+changelog+standard-version自动规范实践

    }, globals: { // 小程序的全局变量 DEV : true, WECHAT : true, ALIPAY : true, __wxConfig: true, App: true, Page: true, Component: true, Behavior: true, wx: true, getApp: true, getCurrentPages: true, }, rules: { // 这是我的配置,大家可以参考官方团队的配置 ‘linebreak-style’: [‘error’, ‘unix’], //换行样式 quotes: [‘er

    2024年04月11日
    浏览(51)
  • Unity找不到标准资源包standard assets的真正解决方案

    Unity小白一枚,刚刚开始学习。遇到一些问题,感觉在网上搜索到的内容没有帮助,所以写出来希望能帮到大家。 很多Unity的入门教程,都提到了标准资源包standard assets,长这样。  但是我首先在电脑上找不到,然后网上查文章,根据文章提供的二个方法,也没有解决(笨)

    2024年02月02日
    浏览(47)
  • C++进阶语法——STL 标准模板库(下)(Standard Template Library)【学习笔记(七)】

    1、迭代器 迭代器可以将任意的容器抽象成一个序列,可以使用迭代器遍历容器中的元素 迭代器设计的目的是为了解决容器与算法之间的耦合问题,与指针类似,可以通过迭代器访问容器中的元素 迭代器的声明方式为: 容器类型::iterator 变量名称 , 可以理解为一个普通的指

    2024年02月06日
    浏览(47)
  • Windows Server 2022 Standard标准版和Datacenter数据中心版的区别

    微软就 Windows Server 2022 功能提供了相当完整的描述,早在去年 6 月份。微软就对所有版本的 Windows Server 2022 预置了核心和桌面安装选项。该产品遵循微软传统的固定生命周期策略,提供五年的“主流”支持和五年的“扩展”支持。 Windows Server 2022 的产品更新周期遵循长期服务

    2023年04月27日
    浏览(165)
  • 【单片机】STM32单片机的各个定时器的定时中断程序,标准库

    高级定时器和普通定时器的区别(https://zhuanlan.zhihu.com/p/557896041): TIM1是高级定时器,使用的时钟总线是RCC_APB2Periph_TIM1,和普通定时器不一样。 timer.c timer.h 调用 timer.c timer.h 调用 timer.c timer.h 调用 timer.c timer.h 调用 timer.c timer.h 调用

    2024年02月11日
    浏览(53)
  • 第二章 React项目配置ESlint和Prettier实现自动格式化代码以及统一代码风格

    欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、请求、组件封装以及UI(Ant Design)框架的使用。让我们一起掌握React,开启前端开发的全新篇章! 需要准

    2024年02月03日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包