43、VSCode 编辑器针对Eslint检查的优化处理方案

最新推荐文章于 2024-05-10 15:04:37 发布

众神之翼

最新推荐文章于 2024-05-10 15:04:37 发布

阅读量1k

点赞数

分类专栏：前端文章标签： VSCode ESLint

本文链接：https://blog.csdn.net/crystalcs2010/article/details/99977823

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue-cli 构建项目之后，会默认给安装ESLint（ESLint是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码），但也带来了麻烦，编程习惯上，相信大部分人都喜欢Tab按键，进行缩进操作，ESLint检查会强制报告语法问题。

一种简单粗暴的解决方式，

禁止ESLint检查

关闭ESLint方法：在vue项目中找到build文件夹 --> webpack.base.conf.js --> module

上面的方式，解决了编译问题，但是文件中还是会出现很多红色波浪线的提示，同样烦到抓狂，那么进行第二步，引入插件，直接通过保存文件，自动格式化成为EsLint支持的文档样式

引入插件

VSCode中添加 eslint 和 vetur 插件

上面截图是我已经安装过的了，不然也会显示下面 Install的绿色按钮的

安装完之后，就是开始添加配置的时刻了，配置我也是直接网上直接复制粘贴过来的，如果有更好的配置，希望下面回复贴出来，供更多的人分享

点击Edit in settings.json 进入文本编辑界面，贴上下面的配置信息，然后保存即可

{
    "editor.tabSize": 2,
    "files.associations": {
        "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
  "eslint.validate": [
      "javascript",{
          "language": "vue",
          "autoFix": true
      },"html",
      "vue"
  ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    "editor.snippetSuggestions": "top",
  }

所有配置步骤到此结束，保存文件的时候，会有奇迹发生哟