VSCode 设置ESLint 实现保存自动格式化

本文详细介绍了如何在项目中配置ESLint进行代码规范检查,包括必要的依赖安装、校验规则设定,以及如何在VSCode中安装插件并进行用户配置以实现自动代码检查与修复。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、相关依赖

package.json文件中加入相关ESLint依赖

"eslint": "4.19.1",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.0.0",
"eslint-plugin-html": "4.0.5",
二、校验规则

.eslintrc.js文件中添加校验规则

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // check if imports actually resolve
  'settings': {
    'import/resolver': {
      'webpack': {
        'config': 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  'rules': {
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true
    }],
    'camelcase': [0, {
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    'curly': [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    'eqeqeq': [2, 'allow-null'],
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      'SwitchCase': 1
    }],
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }],
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }],
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-console': 'off',
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 0,
    'no-delete-var': 2,
    'no-dupe-args': 2,
    'no-dupe-class-members': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty-character-class': 2,
    'no-empty-pattern': 2,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [2, {
      'allowLoop': false,
      'allowSwitch': false
    }],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [2, {
      'max': 1
    }],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef': 2,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      'defaultAssignment': false
    }],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unused-vars': [2, {
      'vars': 'all',
      'args': 'none'
    }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    'no-with': 2,
    'one-var': [2, {
      'initialized': 'never'
    }],
    'operator-linebreak': [2, 'after', {
      'overrides': {
        '?': 'before',
        ':': 'before'
      }
    }],
    'padded-blocks': [2, 'never'],
    'quotes': [2, 'single', {
      'avoidEscape': true,
      'allowTemplateLiterals': true
    }],
    'semi': [2, 'never'],
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [2, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [2, {
      'words': true,
      'nonwords': false
    }],
    'spaced-comment': [2, 'always', {
      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  }
}

三、VSCode安装相关插件

插件搜索并安装eslint和vetur插件

四、VSCode的ESLint用户配置

文件->首选项->设置,用户设置中加入eslint相关的设置

{
    //eslint 代码自动检查相关配置
 
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
	    "extensions": [".js",".vue"]
    },
    "eslint.validate": [
        "javascriptreact",
        "vue",
        "javascript", {
            "language": "vue",
            "autoFix": true
        },
        "html", {
          "language": "html",
          "autoFix": true
        }
  ],
}

<think>好的,我现在需要帮助用户解决如何在VSCode中将ESLint设置为默认的一键格式化工具的问题。首先,我要回忆一下VSCode的配置流程,确保步骤正确。用户可能对ESLintVSCode的集成不太熟悉,所以需要分步骤说明,并且要确保每个步骤都清晰易懂。 首先,我需要确认用户是否已经安装了ESLint扩展。因为如果没有安装,后面的配置就无法进行。所以第一步应该是指导用户安装ESLint扩展。接下来,用户需要配置VSCode设置,将ESLint设置为默认格式化工具。这里可能需要修改settings.json文件,或者通过图形界面操作。两种方法都需要详细说明,因为不同用户可能有不同的偏好。 然后,我需要考虑到用户可能已经安装了其他格式化工具,比如Prettier,这时候需要指导用户如何禁用其他格式化工具,或者调整优先级。同时,要确保ESLint的配置文件(如.eslintrc)已经正确设置,否则即使设置为默认格式化工具,也可能无法正常工作。引用中的[^1]提到,推荐使用eslint:recommended配置,并根据项目需求调整rules,特别是缩进设置,这一点很重要,需要提醒用户检查他们的ESLint配置。 另外,用户可能会遇到快捷键冲突或者保存自动格式化的问题,这时候需要指导用户如何设置editor.formatOnSave,并绑定正确的快捷键。可能还需要提到如何解决常见的错误,比如ESLint插件未激活,或者配置文件有误。 最后,生成相关问题的时候,要考虑用户可能进一步的需求,比如如何处理多个格式化工具,如何自定义规则,以及保存自动格式化设置。这些问题可以帮助用户更深入地了解ESLintVSCode中的使用。 现在,我需要整理这些思路,按照步骤详细说明,确保每个环节都覆盖到,同时引用提供的参考资料中的相关内容,特别是在配置ESLint时的建议。要使用中文,保持回答结构清晰,避免使用Markdown格式,行内公式用$...$,独立公式用$$...$$,但在这个问题中可能不需要数学公式,所以主要关注配置步骤和相关问题的生成。</think>### 如何在VSCode中将ESLint设置为默认格式化工具 #### 步骤 1: 安装必要扩展 1. 在VSCode扩展商店中搜索并安装 **ESLint**(由Microsoft提供)。 2. 确保项目已安装`eslint`依赖(通过`npm install eslint --save-dev`或全局安装)。 #### 步骤 2: 配置VSCode设置 1. **打开设置**: - 通过快捷键 `Ctrl + ,`(Windows/Linux)或 `Cmd + ,`(Mac)进入设置界面。 - 或在命令面板(`Ctrl + Shift + P`)搜索 `Preferences: Open Settings (JSON)`,直接编辑配置文件。 2. **添加以下配置**: ```json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.defaultFormatter": "dbaeumer.vscode-eslint", "eslint.format.enable": true } ``` - `editor.defaultFormatter` 指定ESLint为默认格式化工具。 - `eslint.format.enable` 允许ESLint执行格式化操作。 #### 步骤 3: 验证ESLint配置 1. 确保项目根目录存在有效的`.eslintrc`配置文件。 - 若未配置,可运行 `npx eslint --init` 生成基础配置。 - 推荐使用 `eslint:recommended` 预设并根据项目需求调整规则(如缩进`indent`规则)。 2. 测试格式化功能: - 在代码文件中按 `Shift + Alt + F`(Windows/Linux)或 `Shift + Option + F`(Mac)。 - 或右键选择「Format Document」。 #### 常见问题排查 - **未生效**:检查VSCode右下角状态栏是否显示ESLint已激活,或尝试重启编辑器。 - **与其他工具冲突**:禁用其他格式化扩展(如Prettier),或在设置中限定文件类型: ```json "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值