位置: IT常识 - 正文

在VSCode中配置代码自动 eslint 格式化(修改eslint规则、eslint忽略文件)(vscode配置r)

编辑:rootadmin
在VSCode中配置代码自动 eslint 格式化(修改eslint规则、eslint忽略文件) 一、Eslint

推荐整理分享在VSCode中配置代码自动 eslint 格式化(修改eslint规则、eslint忽略文件)(vscode配置r),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vscodec配置,vscode怎么配置,vscode配置clang,vscodec配置,vscode配置eigen,vscode配置rem,vscode配置clang,vscodec配置,内容如对您有帮助,希望把文章链接给更多的朋友!

Eslint 是用来检测和规范代码格式的工具,应用在工程化项目中,可以保证项目代码格式的一致性和规范性,大大提升了代码的可读性。

二、配置过程

本博客是讲述对一个已经引用 eslint 依赖Nuxt项目(vue项目应该相同),在使用VScode进行开发时,如何配置VScode在保存时,自动 eslint 格式化,并修改部分 eslint 规则,使其不与自动格式化的规则相冲突。这样可以大大提升我们的开发效率,并且如果对某些外部复制(抄)过来的代码,也可通过自动格式化,来使其符合 eslint 的格式。

1、安装插件

在 VSCode 的插件市场中安装以下四个插件:

① Eslint

② Vetur在VSCode中配置代码自动 eslint 格式化(修改eslint规则、eslint忽略文件)(vscode配置r)

该插件是用来实现Vue语法高亮的。

③ Prettier - Code formatter

④ Manta’s Stylus Supremacy

格式化CSS

2、修改 VScode 配置文件,使保存时,自动进行eslint格式化

点击VSCode页面左下角的设置按钮,选择设置,选择扩展中的Eslint选项,并找到 在 settings.json 中编辑选项。 然后在该 配置文件中输入以下代码:

{ "workbench.colorTheme": "Default Dark+", "editor.tabSize": 2, "editor.fontSize": 14, "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "security.workspace.trust.untrustedFiles": "open", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.detectIndentation": false, "editor.formatOnSave": true, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], "prettier.eslintIntegration": true, "prettier.semi": false, "prettier.singleQuote": true, "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, "stylusSupremacy.insertColons": false, "stylusSupremacy.insertSemicolons": false, "stylusSupremacy.insertBraces": false, "stylusSupremacy.insertNewLineAroundImports": false, "stylusSupremacy.insertNewLineAroundBlocks": false, "editor.language.brackets": [ ], "eslint.nodeEnv": ""}3、 修改eslint格式规则

在上面配置完成后,VSCode已经可以在保存时自动格式化了,但此时有两条格式化规则与eslint的规则相冲突,所以需要进行配置,在项目根目录的.eslintrc.js文件内,配置的是eslint的相关设置:

// 项目不同配置项可能不同,主要看rules项即可module.exports = { root: true, env: { browser: true, node: true }, parserOptions: { parser: '@babel/eslint-parser', requireConfigFile: false }, extends: [ '@nuxtjs', 'plugin:nuxt/recommended' ], plugins: [ ], // add your custom rules here rules: { // 修改标签属性的 eslint 规则 允许标签属性换行 'vue/first-attribute-linebreak': ['error', { singleline: 'ignore', multiline: 'ignore' }], // 修改 右标签 > 的 eslint 规则 无需单独一行 'vue/html-closing-bracket-newline': 0 }}

Eslint的rules规则: '规则名': [错误级别, '错误处理方式'] 错误级别分为三种: ① “off” or 0 - 关闭规则

② “warn” or 1 - 将规则视为一个警告

③ “error” or 2 - 将规则视为一个错误

// 例如 rules: { 'semi': [2, 'never'], // 不使用分号,否则报错 'quotes': [2, 'single'] // 使用单引号,否则报错 }4、设置 eslint 忽略某些文件,不进行格式化

在项目根目录下 新建 .eslintignore 文件,以文件相对路径的形式表示项目中那些文件应该被忽略,一般用于忽略某些引入的外部组件。以 # 开头的行会被当作注释,路径是相对于 .eslintignore 的位置或当前工作目录,以 ! 开头的行是否定模式,它将会重新包含一个之前被忽略的模式。 除了 .eslintignore 文件中的设置的被忽略文件,ESLint还会自动忽略 node_modules和 bower_components中的文件。 当 ESLint 运行时,在确定哪些文件要检测之前,它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件,当遍历目录时,将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用,所以,不是当前工作目录下的 .eslintignore 文件将不会被用到。

# eslint 忽略的文件夹 或某个单独文件# components/pagination/*assets/css/icon/*# 把被忽略的文件夹中的某个文件拿出来,使其不再被忽略!assets/css/icon/icon.css# 忽略所有js文件# **/*.js
本文链接地址:https://www.jiuchutong.com/zhishi/292928.html 转载请保留说明!

上一篇:两只双峰骆驼 (© Nurlan Kulcha/Alamy)(双峰骆驼什么意思)

下一篇:re.findall() 的用法(re.findall()用法)

  • 秦腔著名代表人物(qq怎么登不上去了)(秦腔的代表人物)

    秦腔著名代表人物(qq怎么登不上去了)(秦腔的代表人物)

  • apple watch键盘在哪里(iwatch键盘在哪里)

    apple watch键盘在哪里(iwatch键盘在哪里)

  • 红米k40支持wifi6么(红米k40支持wifi几)

    红米k40支持wifi6么(红米k40支持wifi几)

  • 抖音极速版如何私信(抖音极速版如何升级到最新版本)

    抖音极速版如何私信(抖音极速版如何升级到最新版本)

  • 为什么微信步数会倒退(为什么微信步数突然增加很多)

    为什么微信步数会倒退(为什么微信步数突然增加很多)

  • wifi显示已保存 但是不能连接(wifi显示已保存,加密(不可上网))

    wifi显示已保存 但是不能连接(wifi显示已保存,加密(不可上网))

  • 小米平衡车蓝牙怎么连接(小米平衡车蓝牙怎么连接不上)

    小米平衡车蓝牙怎么连接(小米平衡车蓝牙怎么连接不上)

  • 为什么抖音不显示转发量(为什么抖音不显示浏览记录)

    为什么抖音不显示转发量(为什么抖音不显示浏览记录)

  • 信息旁边有个月亮是什么意思(信息旁边有个月亮)

    信息旁边有个月亮是什么意思(信息旁边有个月亮)

  • oppoa8和a11处理器差距(oppoa8好还是a11x好)

    oppoa8和a11处理器差距(oppoa8好还是a11x好)

  • vivoz5x有红外线功能吗(vivoz5红外线在哪)

    vivoz5x有红外线功能吗(vivoz5红外线在哪)

  • ipad6怎么设置动态壁纸(ipad怎么设置动态锁屏)

    ipad6怎么设置动态壁纸(ipad怎么设置动态锁屏)

  • 华为手表gt2可以接电话吗(华为手表gt2可以下载微信吗)

    华为手表gt2可以接电话吗(华为手表gt2可以下载微信吗)

  • 如何清理华为云空间的照片(如何清理华为云盘空间)

    如何清理华为云空间的照片(如何清理华为云盘空间)

  • 华为mate30支持3d touch吗(华为mate30支持3D touch吗)

    华为mate30支持3d touch吗(华为mate30支持3D touch吗)

  • 用手机将图片内存变小(手机上怎么把图片上的内容弄成文档)

    用手机将图片内存变小(手机上怎么把图片上的内容弄成文档)

  • 红米机一直开不了机(红米手机一直开不了机)

    红米机一直开不了机(红米手机一直开不了机)

  • kokos是什么牌子(koko是什么品牌)

    kokos是什么牌子(koko是什么品牌)

  • airpods2容易掉吗(airpods2容易脱落吗)

    airpods2容易掉吗(airpods2容易脱落吗)

  • 微信小程序怎么更换绑管理员(微信小程序怎么开发)

    微信小程序怎么更换绑管理员(微信小程序怎么开发)

  • oppo手机右上角的HD和1是什么(oppo手机右上角有个锁怎么去掉)

    oppo手机右上角的HD和1是什么(oppo手机右上角有个锁怎么去掉)

  • 怎么查看iPad电池寿命损耗和循环次数(怎么查看ipad电池损耗)

    怎么查看iPad电池寿命损耗和循环次数(怎么查看ipad电池损耗)

  • 华为nova4能分屏吗(华为nova4e可以分屏)

    华为nova4能分屏吗(华为nova4e可以分屏)

  • sigmoid函数求导(sigmoid函数求导表达式)

    sigmoid函数求导(sigmoid函数求导表达式)

  • 高新企业享受税收优惠政策备案怎么申请
  • 发货过程
  • 普通发票的税费额度高吗
  • 五险一金计提缴纳分录
  • 费用暂估会计分录
  • 建筑业出售废旧电脑取的收入如何申报
  • 公众号注册验证方式
  • 预交了一个季度的社保
  • 税号变更需要变更什么
  • 主营业务税金及附加怎么算
  • 异地不动产租赁 深圳税务 所得税
  • 生产性服务业定义
  • 酒店挂账要做收款凭证吗
  • 期末未缴税额为正是什么意思
  • 企业购车可以一次性扣除吗
  • 转让土地使用权交什么税
  • 我的初级奋斗经历作文
  • 长租押金多少合适
  • 上个月开的发票这个月还能用吗
  • 国税局代开发票是否可代地税局征收城市维?
  • 会计变更
  • 辅助生产车间工人工资
  • 认筹金客户经常提出哪些问题
  • linux的pipe
  • php serialize
  • 固定资产进项发票
  • php语法和常用的函数
  • 工程施工科目借贷方向
  • 销售商品售后回购
  • cuda completed with errors
  • 可抵扣的费用
  • pa等比例缩放
  • 采购周转材料会计分录怎么写
  • 职工福利费会计科目怎么写
  • 建筑劳务公司何去何从
  • 微信小程序在哪里打开
  • 回顾2021年作文
  • 医疗机构收据
  • MyBatis MapperProvider MessageFormat拼接批量SQL语句执行报错的原因分析及解决办法
  • 开票钱收不回怎么办
  • 没有进项票开了销项票后期有了进项票可以吗
  • 利息补缴税款加收利息计算
  • 废旧物资专用发票
  • 收到的现金折扣
  • 如何查询继续教育
  • 销项税用转出吗
  • 消费税计税分录
  • 房租费用能计入什么科目
  • 销项税多做了怎么冲
  • 代收收入
  • 权益净利率计算公式产权比率
  • 营业外支出包括哪些?
  • 发票税号与公司税号不一致
  • 给对方承兑对方不承认怎么办
  • 货款折扣的账务处理
  • 收到融资租赁发票要交印花税吗
  • 将备份的mdp文件导入数据库
  • jquery常用的事件绑定函数有哪些
  • 在基于Xen的CentOS系统VPS上配置PPTP VPN的教程
  • 怎么快速
  • 电脑ios怎么安装
  • win8操作中心怎么关闭
  • es6 文档
  • linux与windows
  • css英文代码翻译
  • 代码sd是什么意思
  • 你有一份来信
  • 基于jQuery实现Tabs选项卡自定义插件
  • 使用jquery实现的项目
  • android开发框架mvp
  • 第三届一带一国际高峰论坛
  • 陕西省地方税务局公告2017年第2号
  • 广州地税电子税票查询
  • 办公室主任和党支部书记哪个职位高
  • 旧房转让土地增值税扣除项目
  • 非经营性房屋具体指哪些?
  • 为什么有的企业在企查查上查不到
  • 怎样登录市地税局网站
  • 个人所得税的通知
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设