vscode配置eslint,实现文件保存使用eslint格式化,问题1.扩展名‘eslint‘被配置为格式化程序,但它无法格式化’JavaScript‘文件。2.eslint命令无法执行

当项目中使用了eslint时,如果保存时不使用eslint格式化,运行时可能会由于个人编码习惯出现很多问题,所以期望在保存时能够自动根据eslint配置格式化文档。

eslint 配置完成后始终不生效问题

首先说一下eslint配置完后,始终不生效的问题,我之前使用的多模块项目,每个模块独立,但是始终有一个模块的eslint不生效,且右键格式化文档时提示:扩展名’eslint‘被配置为格式化程序,但它无法格式化’**‘文件,把模块内容复制到其他模块或新建模块都ok。最终解决:重启eslint。具体操作如下:
1.在vscode中使用快捷键ctrl+shift+p打开命令输入框
2.输入eslint
3.点击ESLint:Restart ESLint Server。
在这里插入图片描述

如果重启后仍然不能解决问题

重复执行上面的1、2步,然后在第三步点击ESLint:show output channel。将会在控制台打印报错,有可能是eslint相关的插件未能安装,根据错误提示安装即可。

vscode配置eslint

1.安装eslint插件

在vscode插件市场中安装eslint
在这里插入图片描述

2.设置

设置图标–>设置(或者文件–>首选项–>设置),勾选下面选项
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3.在项目根目录中创建.eslintrc.js文件

当然想要使用eslint格式化,在项目根目录中需要有.eslintrc.js文件,下面是一个示例

module.exports = {
  root: true,
  env: {
    node: true,
    jquery: true
  },
  globals: { '_': true, 'dayjs': true, '$': true, 'jQuery': true, 'echarts': true, 'Echarts': true },
  extends: ['plugin:vue/strongly-recommended', 'standard'],
  rules: {
    'prefer-const': 2,
    'no-const-assign': 2,
    'no-var': 2,
    'no-console': 'warn',
    'no-tabs': 0,
    'no-unused-vars': 0,
    'no-return-assign': 0,
    'vue/html-self-closing': 'off',
    'vue/require-default-prop': 0,
    "sort-imports": ["error", {
      "ignoreCase": true,
      "ignoreMemberSort": true,
      "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
    }],
    'vue/max-attributes-per-line': [
      // 配置成可允许一行attribute跟着标签
      'error',
      {
        singleline: 1,
        multiline: {
          max: 1,
          allowFirstLine: false
        }
      }
    ],
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

4.检查配置是否生效

可以在等号两边多打几个空格看是否有红色波浪线提示
在这里插入图片描述
此时点击保存,会自动将多余空格删除。
同时也可以通过右键–>使用…格式化文档,查看可以选择的格式化程序
在这里插入图片描述

在这里插入图片描述
补充:
vscode中执行eslint相关命令报错
在这里插入图片描述
最近升级了node,后面不知道为什么eslint突然不生效了,想执行eslint命令查看问题结果直接执行不了。如上图所示
解决:升级vscode版本

  • 11
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vscode中设置Eslint格式化可以通过以下步骤完成。首先,你需要下载并安装Eslint插件。然后,你可以在Vscode的设置中搜索Eslint,并选择启用格式化选项。你也可以在settings.json文件中编写代码来完成这个配置,比如设置"eslint.format.enable": true。这样,每次按下格式化快捷键Alt+Shift+F时,Vscode就会使用Eslint格式化当前文件。这样做可以帮助你在开发过程中使用Eslint来校验代码,并提供规则提示和错误标记。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [VsCode使用Eslint格式化文件](https://blog.csdn.net/weixin_40571331/article/details/122876910)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vscode 使用Eslint 格式化代码](https://blog.csdn.net/weixin_45180205/article/details/128591003)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [给Vscode配置ESlint语法检查 — ESLint 插件自动格式化设置(实现Ctrl+S 按照ESLint规则自动格式化代码)](https://blog.csdn.net/weixin_42146585/article/details/126037592)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值