位置: 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()用法)

  • iPhone12如何进行截屏(iphone 12步骤)

    iPhone12如何进行截屏(iphone 12步骤)

  • 小米体脂称2和1有什么区别(小米体脂称2和云麦好轻mini2哪个好)

    小米体脂称2和1有什么区别(小米体脂称2和云麦好轻mini2哪个好)

  • cpu es版是什么意思(es版cpu性能如何)

    cpu es版是什么意思(es版cpu性能如何)

  • 表格里的文字怎么全部显示出来(表格里的文字怎么提取出来)

    表格里的文字怎么全部显示出来(表格里的文字怎么提取出来)

  • 苹果11手电筒怎么不亮(苹果11手电筒怎么打不开)

    苹果11手电筒怎么不亮(苹果11手电筒怎么打不开)

  • 买家号违规多久能健康(买家号违规多久能恢复)

    买家号违规多久能健康(买家号违规多久能恢复)

  • 封ip是什么意思(封ip有用吗)

    封ip是什么意思(封ip有用吗)

  • 换卡不换号码要钱吗(换卡不换号码要邮寄费嘛)

    换卡不换号码要钱吗(换卡不换号码要邮寄费嘛)

  • qcy耳机只能连一个怎么办(qcy一只耳机连不上)

    qcy耳机只能连一个怎么办(qcy一只耳机连不上)

  • 抖音直播怎么买东西(抖音直播怎么买运费险)

    抖音直播怎么买东西(抖音直播怎么买运费险)

  • 快手视频C类是什么意思(快手视频有几种类型)

    快手视频C类是什么意思(快手视频有几种类型)

  • 手机音量自动调节怎么回事(手机音量自动调大怎么办)

    手机音量自动调节怎么回事(手机音量自动调大怎么办)

  • 华为手表ftn b19有什么功能(华为手表ftnb19表带多宽)

    华为手表ftn b19有什么功能(华为手表ftnb19表带多宽)

  • 手机qq登录不了怎么办(手机qq登录不了老师助手)

    手机qq登录不了怎么办(手机qq登录不了老师助手)

  • oppor17机身长为多少(oppor17机身长度和宽度)

    oppor17机身长为多少(oppor17机身长度和宽度)

  • 误删好友标识怎么恢复(不小心删了好友标识怎么恢复)

    误删好友标识怎么恢复(不小心删了好友标识怎么恢复)

  • 快手的瘦身长腿在哪(快手的长腿瘦身特效怎么下架了)

    快手的瘦身长腿在哪(快手的长腿瘦身特效怎么下架了)

  • 怎么清除手机自定义铃声(怎么清除手机自带浏览器)

    怎么清除手机自定义铃声(怎么清除手机自带浏览器)

  • excel处理的对象是什么(excel 处理)

    excel处理的对象是什么(excel 处理)

  • 手机图片保存了找不到(手机保存了图片找不到去哪里找)

    手机图片保存了找不到(手机保存了图片找不到去哪里找)

  • 如何制作彩视频(制作彩视频,怎么做)

    如何制作彩视频(制作彩视频,怎么做)

  • 安居客如何切换城市(安居客如何切换租房)

    安居客如何切换城市(安居客如何切换租房)

  • blued手机号可以查到吗(blued手机号可以解绑吗)

    blued手机号可以查到吗(blued手机号可以解绑吗)

  • Mac修改用户名图文教程  如何修改MAC用户名(mac如何改变用户名)

    Mac修改用户名图文教程 如何修改MAC用户名(mac如何改变用户名)

  • 元宇宙 代价高昂的失败(元宇宙band)

    元宇宙 代价高昂的失败(元宇宙band)

  • 出口企业何时选择免(征)税申报方式?
  • 嵌入式软件产品的增值税即征即退具体实例
  • 运输费劳务是否可以扣除
  • 向投资者分配的现金股利如何做账
  • 补贴收入属于什么分配
  • 可供出售金融资产会计处理
  • 空调可以直接做费用吗
  • 经营许可证要交税吗
  • 对公的etc怎么绑定怎么充值
  • 收到银行汇票要去银行办理吗
  • 如何区别文化体育业和娱乐业
  • 给退休工人发工资怎么入账
  • 政府给予的工业支出
  • 供应链公司的组织架构图
  • 代发工资的手续费是多少
  • 公司注销固定资产交什么税
  • 企业咨询服务费合同
  • 个体工商户税收优惠政策2023年最新
  • 填报退税
  • 纳税人跨县(市、区)提供建筑服务
  • 未计提工资
  • 分公司交总公司管理费怎么做账
  • 市政工程税率多少
  • 实收金额比应收金额多
  • 电子发票会计怎么记账
  • 失控发票账务处理
  • 销售固定资产的收入计入什么科目
  • 1697510839
  • 仓库折旧费
  • 公司用车年检
  • 成本法 合并
  • 商业一般纳税人税率多少
  • 苹果Mac系统怎么切换输入法
  • 房产税和土地使用税征税对象
  • 制造企业成本计算模型有哪些类型
  • 企业所得税季度申报表营业收入怎么填写
  • 朝圣者将风马旗扔向甘登寺上方的空中为新年祈福,中国西藏 (© Ian Cumming/plainpicture)
  • echarts地图参数设置
  • phpsession和cookie
  • 从 零开始
  • 疯狂世界百科
  • php计时函数
  • 管理费用包括哪些会计科目
  • 普通发票退税流程图
  • 弥补以前年度亏损最多几年
  • 如何在对公账户对账操作
  • 公司缴纳社保应该怎么做账
  • 买轿车产生的服务费用
  • Parcel 中文文档 | Parcel 中文网
  • 新公司筹建期要做账吗
  • 非货币性资产交换和债务重组的区别
  • 免税销售额和本期免税额
  • 采用汇兑的方式归还前欠货款
  • 故障的机器修好多少钱
  • 银行本票与银行汇票的区别之一是
  • 增值税直接计算法间接计算法举例
  • 没有发票的费用怎么报销
  • 工厂用的工具放计入哪个科目
  • 外汇申报材料
  • 小规模发票跨月冲红税款可以退回吗
  • 企业会计准则规定,企业在对会计要素
  • 在linux系统中安装软件
  • ultraiso刻录音乐到dvd
  • 怎么简单快速的拼成魔方六面
  • drivemgr.exe 病毒介绍
  • 有没有软件恢复
  • windows1020h2版本怎么样
  • onionwormimmune.exe是什么
  • win10的快速访问
  • win8注册表损坏进不了系统
  • opengl 模型视图矩阵
  • unity中canvas怎么调框大小
  • shell 查找最新文件
  • nodejs实现文件下载
  • android 5.1 WIFI图标上的感叹号及其解决办法
  • 江西省国家税务局电子税务局
  • 关税由谁来承担
  • 新疆税务服务网
  • 武汉税务地区编号
  • 河南省2020年12月纳税申报截止日期
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设