Vue 项目eslint 配置编程风格(VScode)

本文介绍了如何在Vue项目中配置和使用ESLint,包括通过npm安装,初始化配置文件,选择规则,以及安装必要的插件。强调了`eslint-plugin-vue`和`eslint-config-standard`的作用,并提供了配置示例,展示了如何调整规则以适应个人编程风格。此外,还提及了VSCode编辑器的集成,以及如何根据规则配置补充自定义规则。
摘要由CSDN通过智能技术生成

$ npm install eslint --save-dev

紧接着你应该设置一个配置文件:

$ ./node_modules/.bin/eslint --init

然后按照可选一步一步配置:

在这里插入图片描述

安装之后你就可以看到目录里面有eslint 的配置文件:

在这里插入图片描述

module.exports = {

env: {

browser: true,

es2021: true

},

extends: [

‘plugin:vue/essential’,

‘standard’

],

parserOptions: {

ecmaVersion: 12,

sourceType: ‘module’

},

plugins: [

‘vue’

],

rules: {

}

}

这里基本上eslint 就可以在项目里生效了,还需要自己风格配置和工具配置。

按照自己选项安装之后,可以发现安装了如下依赖:

  • eslint@7.12.1

  • eslint-plugin-node@11.1.0

  • eslint-config-standard@16.0.0 //对应配置项的extends:‘standard’

  • eslint-plugin-import@2.22.1

  • eslint-plugin-vue@7.1.0 //对应配置项的extends:plugin:vue/essential

  • eslint-plugin-promise@4.2.1

除了 eslint-config-standard@16.0.0还有一个eslint-plugin-vue@7.1.0

添加这个插件可以检查.vue 文件的 template ,同时该插件提供多种规则标准集关于vue3和vue2。建议使用:Recommended,可以规范template 标签。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值