vscode中eslint自动格式化

最新推荐文章于 2025-06-04 14:51:43 发布

蒲宁彦

最新推荐文章于 2025-06-04 14:51:43 发布

阅读量678

点赞数 1

CC 4.0 BY-SA版权

文章标签： vscode

本文链接：https://blog.youkuaiyun.com/qq_38637619/article/details/118963274

本文详细介绍如何在VSCode中配置ESLint，实现自动格式化，并探讨了prettier和vetur的整合，确保代码一致性。包括设置详细步骤和.eslintrc.js配置，适用于前端开发者和团队协作。

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

vscode eslint自动格式化

setting：如下

{
    "editor.tabSize": 4,
    "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
    "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
    "prettier.semi": false, //去掉代码结尾的分号
    "prettier.singleQuote": true, //使用单引号替代双引号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
    "wrap_attributes": "auto" //属性强制折行对齐
    }
    },
    "eslint.validate": [ //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
    "language": "html",
    "autoFix": true
    },
    {
    "language": "vue",
    "autoFix": true
    }
    ],
    "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
    },
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "window.zoomLevel": 1.4,
    "eslint.codeAction.disableRuleComment": {

    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "eslint.nodePath": "",
    "vetur.validation.interpolation": false,
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.quickSuggestions": null,
    "editor.formatOnType":true,
    "editor.formatOnSave": true,
    "editor.fontSize": 14,
  //"eslint.enable": false
  }

.eslintrc.js：如下

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}