vue-cli使用vscode编辑器如何自动eslint检测

最新推荐文章于 2025-06-20 13:55:08 发布

原创

最新推荐文章于 2025-06-20 13:55:08 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在VSCode中配置ESLint插件，实现保存代码时自动进行eslint格式化。步骤包括安装ESLint插件，编辑settings.json和.eslintrc.js文件，以及设置忽略文件的方法。

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

VSCode 保存时自动ESlint格式化

Eslint 自动格式化

"eslint": "^6.1.0",
"eslint-friendly-formatter": "^6.4.1",
"eslint-loader": "^6.4.1",
"eslint-plugin-html": "^6.4.1",

首先安装ESLint插件

安装完成后，每次修改完代码都需要执行 "npm run lint"之后才能格式化

打开设置选项

编辑代码settings.json

{
  "workbench.colorTheme": "Default Light+"  
  "workbench.activityBar.visible": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "window.zoomLevel": 0,
  //-----------------------------新增加的配置---------------------------------
  //关闭VSCode在Save时候自动格式化，因为VSCode自带的格式化和ESlint规范并不兼容
  "editor.formatOnSave": false,
  //代码保存时，自动执行ESlint格式化代码
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  // 配置 ESLint 检查的文件类型
  "eslint.validate": [
    "javascript",
    "vue",
    "htm