关于VsCode 插件Eslint的使用和配置以及为什么不生效的解决办法

前言

我们在写代码的时候,对格式有着一定的格式要求,尤其是上班之后,如果大家的格式不能统一,就会造成代码每次更新都会大变样。使用vs的时候有一款插件可以帮助我们一键格式化代码。

步骤如下

1:在vs中安装插件

在这里插入图片描述

2:在vs中全局或者局部安装eslint

在这里插入图片描述

3:配置初始化文件

一般在创建项目的时候在根目录就会有.eslintrc.js和.eslintignore文件,如果没有可以自行创建,然后在其中键入以下内容:
.eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue','js'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

.eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

4:配置settinng.json

打开file->preferences->setting
在这里插入图片描述
然后将以下内容贴进去,注意,配置格式的代码一定要在第一个大括号对里面!!!!

{
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "emmet.excludeLanguages": [
        "markdown"
    ],
    //保存的时候自动格式化
    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

5:其他常见的配置选项

eslint官方中文文档:里面有一些常用的配置,需要可自取!

6:接下来你在保存代码的时候便会按照你的格式进行格式化!

您好!对于VS Code配置ESLint不生效的问题,我可以提供一些建议。请按照以下步骤进行排查: 1. 确保已在项目中安装了ESLint,并且在项目的根目录下存在配置文件(一般为`.eslintrc`或`.eslintrc.js`)。 2. 确认您的VS Code已安装了ESLint插件。在扩展面板中搜索并安装ESLint插件。 3. 在VS Code的设置中,找到ESLint配置项。您可以通过按下`Ctrl + ,`(Windows/Linux)或`Cmd + ,`(Mac)打开设置面板,然后搜索"eslint"来找到相关配置。 4. 在ESLint配置项中,确保已选中"自动修复"(autoFix)选项。这将使VS Code自动应用ESLint规则并修复一些常见问题。 5. 如果您的项目使用了特定的ESLint规则集(如Airbnb或Standard等),请确保已在VS Code的设置中指定正确的规则集。在`.eslintrc`文件中,您可以配置"extends"属性来指定所使用的规则集。 6. 如果您的项目有多个工作区文件夹,请确保在VS Code的设置中已正确配置ESLint的工作区设置。您可以在工作区文件夹的`.vscode/settings.json`文件中配置ESLint相关设置。 7. 尝试重启VS Code,然后打开您的项目,看看ESLint是否开始生效。 如果上述步骤都没有解决问题,您可以进一步检查以下可能的原因: - 您的项目中可能存在ESLint配置错误。请确保`.eslintrc`文件中的规则和插件设置正确,并符合您项目的需求。 - 如果您的项目使用了多个ESLint配置文件,请确保这些配置文件之间没有冲突,并且在VS Code的设置中正确指定了配置文件路径。 - 某些其他VS Code插件可能会干扰ESLint的工作。您可以尝试禁用其他插件,然后逐个启用以确定是否与其他插件冲突。 希望这些提示能够帮助您解决问题!如有更多疑问,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值