vscode一格式化就报错？各种风格问题各种报错烦不胜烦，教你如何用好vue的eslint风格配置

Achilles 发布于2019-08-22 16:16 / 2697人阅读

摘要：格式化安装插件如果题主认真读了的的话，应该可以写出下面的配置了。用来格式化和提示格式错误。在编码过程中提示格式错误，养成良好的编码习惯。

前言

感觉搭建一个舒服的前端开发环境，十分的重要定制化的格式化，编辑器自带的格式化各种报错，手动改真的会死人，因此搭建一个编辑器环境必不可少，现在要讲的是vscode中如何定制vue

vs code的配置文件:

format相关:搜索format，你会看到很多默认的格式化配置项。

更改format配置你可以选择想要更改的内容，复制到右边进行更改，当然，有些配置项是装好插件才会出来的。后面所说的设置配置文件都是修改右边这里哦～

安装插件:非常简单咯，点击左侧图标，然后输入你想搜索的名字就好了。当然有些插件可能没有被官方采纳。你也可以去github上下载。

所以:你想要一个什么样的格式化基本上都可以实现，阅读一下不同插件的github里面的readme就可以了。

1 ESLint格式化

安装插件：ESLint

如果题主认真读了ESLint的Readme的话，应该可以写出下面的配置了。不过我还是写一下好了。
用来格式化和提示格式错误。设置文件类型:

设置配置:

{
  "workbench.startupEditor": "welcomePage",
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

2 在Vue项目中的ESLint

安装插件：Vetur

其实在工作中，我们往往不喜欢常常去按保存键，或者在保存之前想先格式化一下再继续写。因此，我采用了下面的方式：默认自带了格式化的功能，快捷键是shift+option+f（mac）。主要用来格式化复制粘贴的代码。ESLint 在编码过程中提示格式错误，养成良好的编码习惯。

设置文件类型:

设置配置：

{
  "vetur.format.defaultFormatter.html": "prettier" //这是vue中html的格式化
  "workbench.startupEditor": "welcomePage",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.tabSize": 2,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ]
}

3 JS中的格式化

安装插件：Javascript Standard Style

设置文件类型:

4 废话少说，装好上面三个插件，大家可以参考我的配置，直接复制进去就行了

{
    "editor.fontSize": 19,
    "workbench.colorTheme": "Monokai",
    "workbench.startupEditor": "welcomePage",
    "editor.tabSize": 2,
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.quickSuggestions": {
        "strings": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        }
    ],
    "files.autoSave": "afterDelay",
    "vetur.format.defaultFormatter.html": "prettier"  
}

[原文]参考

GPU云服务器云服务器 java开始就报错不胜烦腾讯云服务器各种问题 vim配置c语言风格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94188.html

梳理前端开发使用eslint-prettier检查和格式化代码

摘要：梳理前端开发使用检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。使用格式化所有代码。参考文档如何花分钟解决产生的各种错误的记忆现场原文转载梳理前端开发使用检查和格式化代码线上猛如虎，线下怂如鼠梳理前端开发使用eslint-prettier检查和格式化代码问题痛点在团队的项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编...

yangrd 2019-08-22 17:01 评论0 收藏0
手把手教你如何用Crawlab构建技术文章聚合平台(二)

摘要：上一篇文章手把手教你如何用构建技术文章聚合平台一介绍了如何使用搭建的运行环境，并且将与集成，对掘金进行技术文章的抓取，最后可以查看抓取结果。本篇文章将继续讲解如何利用编写一个精简的聚合平台，将抓取好的文章内容展示出来。上一篇文章《手把手教你如何用Crawlab构建技术文章聚合平台(一)》介绍了如何使用搭建Crawlab的运行环境，并且将Puppeteer与Crawlab集成，对掘金、...

zhunjiee 2019-07-31 10:11 评论0 收藏0
一分钟教你学会配置eslint，还在为风格单双引号，对象末位逗号要不要，引用各种报错而烦恼？(建议收

摘要：最全的配置大全，我已经加了详细中文注释，只需要找到自己想要的配置就可以了，强烈建议收藏用法非常简单，找到下的添加对象即可比如我要把规则原本单引号要变为双引号，那加上注意这个规则如果违反了规则情况下，这里的数字表示不不处理，表示警告，表示错误最全的eslint配置大全，我已经加了详细中文注释，只需要找到自己想要的配置就可以了，强烈建议收藏！用法非常简单，找到.eslintrc.js下...

刘东 2019-08-22 16:05 评论0 收藏0
vscode 配置eslint 开发vue的相关配置

摘要：参考详情请参考此插件允许和修复文件中包含的内联脚本。这是因为中发生了许多内部更改，包括支持预处理器中自动固定的新。请确保在你的配置中使用了该插件自身的配置代码规范解决报错问题如何在vscode中用JavaScript Standard Style风格去验证 vue文件实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。但是有一点非常重要的作者没有...

haobowd 2019-08-02 16:15 评论0 收藏0
vscode 配置eslint 开发vue的相关配置

摘要：参考详情请参考此插件允许和修复文件中包含的内联脚本。这是因为中发生了许多内部更改，包括支持预处理器中自动固定的新。请确保在你的配置中使用了该插件自身的配置代码规范解决报错问题如何在vscode中用JavaScript Standard Style风格去验证 vue文件实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。但是有一点非常重要的作者没有...

lifesimple 2019-08-23 17:13 评论0 收藏0