如何配置并利用vsCode编写符合Standard标准的代码

青墨子衿
4,341 阅读12分钟
引言

折腾了一天的vsCode总算弄完，顺便写下此文供读者参考，并将自己配置中所遇到坑爹地方为大家讲述。另因自身的技术栈是Vue全家桶，所以此篇是介绍Vue项目下的vscode搭建。

下载vsCode

下载安装vscode这种网上资料太多了，因此这边就不多介绍了。
Download Visual Studio Code

界面介绍


鉴于自己玻璃渣般的ps技术这边就不献丑了，大概的为大家介绍下vscode界面构成如上图左边红框框内由5个功能组成。
  1. 第一个就是文档，里面打开就是这张图的界面
  2. 第二个是搜索搜索项目内的文档
  3. 第三个就是cscode强大之处之一集成了git，不过我使用惯了命令行所以这个功能对我来说有点鸡肋不过能够可视化的观看diff还是给个赞。具体如何使用这个git之后介绍插件时为大家简单介绍下，因为自身使用的并不多
  4. 第四个也就是debug。也是vscode强大之处，因为自身比较菜之前一直使用chomeF12来调试代码的。而我对这个的了解也紧紧是搭配一个chome环境来调试debug。但是这功能自身的强大之处是我目前来说还不了解的，所以此处就不过多介绍了。可能node开发更加适合这个debug功能
  5. 第五个就是插件库，个人观点认为vscode比sublime受欢迎很重要的一点就是。插件下载安装比sublime简单啊。从开始学习前端就一直使用着sublime。直到在工作的某天遇到了vscode当天我就叛变了。因为sublime插件下载需要找好多资料，脑壳疼因此sublime我并未安装太多插件，所以也感觉不到sublime的强大之处。
蓝色框框内就是文本编辑了，至于具体的细节方面还是大家慢慢使用中琢磨把。
绿色框框内的就是vscode强大之处之一集成了终端。自从开始使用Vue每天不得不cmd来进行npm run dev 而有了这个终端之后就可以直接在项目里打开。另外终端功能还有很多强大的地方这里就不细说了。至于还有两块一块状态栏和一块菜单栏都是中文就不细说了，内容太多。
Vue项目推荐搭建的vscode插件库（重点）
此处是重点！
此处是重点！此处是重点！

直接上干货

common（通用的插件推荐web项目都应该安装的）:

  1. Auto Close Tag(自动闭合html标签)：极其方便快速开发必备
  2. Auto Rename Tag（自动更改标签）：有时候会在开发时候更改标签，此插件能够自动更改对应的标签明，听说有些小BUG目前我没遇到，两者一起食用更好哦！
  3. Debugger for Chrome（模拟谷歌环境来debug）：这个插件配置很复杂，上文简单提到过，于此插件同类的还有Debugger for Edge和Debugger for Firefox这两个功能一致，但是配置复杂所以此处不做过多介绍，还需要大家自己去折腾，此插件会在项目中生成.vscode文件夹下的launch.json所有配置将在次文件中，加油！！
  4. Document This（注释代码）：目前来看应该是最受欢迎的注释插件，尤其是注释函数给个赞！！推荐
  5. EdiorConfig for VS Code：对于这个插件我现在还是有点懵逼，应该是用于配置vscode插件的一个插件。具体用法我还不是很了解不过，推荐安装！好像是有些插件的依赖。
  6. Git History、Git Lens、Git Project Manager：这3个就是标准的打包为vscode集成的git服务的。因为本身习惯使用git bash 来操作git的原因所以并未深入研究。不过喜欢方便的小伙伴还是推荐稍微研究下并不难。
  7. npm与npm Instellisense(npm插件)：必须安装的插件，能够在vscode集成的终端中使用npm。
  8. Path Autocomplete（路径自动补全）：不用是傻子系列。
  9. REST Client（可牛逼了）：测试http请求的一个插件可牛逼了。这儿不细说，配置不算难但具体实现每个人方法不一样。
  10. Settings Sync（同步vscode配置）：用于同步vscode配置，总不能到公司和家里都给配置一遍吧，难不成是傻子? 这个官方比较详细介绍了（配置），自己点进去看把。
  11. Version Lens（可牛逼了）：相信大家在写项目的时候，可能开发1个月后，新的一些依赖module更新了，但是呢我们用着旧的版本想更新啥的。这个插件就是配合package.json来使用的，简单粗暴！强大无比！不安装是傻子。当然啦升级module时，你要自己先想清楚会不会对项目造成不兼容，以及不兼容如何处理？都是你们自己需要思考的地方。

beautify（美化插件，为了好看）：

  1. Beautify（美化代码）：覆盖面很大。推荐什么代码都有美化！不用写不了代码系列必需品
  2. Beautify css/sass/scss/less（css美化代码）：更好的美化css代码，建议安装。
  3. HTML Snippets（html5代码片段）：同样是个大家都懂得东西，必须的啊谁敢说自己把所有的html标签全给记住了。
  4. vscode-icons（vscode的icons）：简单的小东西就是为你的文件配个icon，好看！安不安装小伙伴自己把。

代码标准化（这儿推荐Standard标准！毕竟用的人多嘛！）：

  1. ESLint（代码标准化）：咳咳让我决定写这篇文章的罪魁祸首！！！不多说相信大家都被这个ESLint所折磨！ 另外其standard标准与vsCode格式化标准不一样可咋整啊！！之后会详细为大家讲解解决方案。
  2. Javascript Standard Format(js代码格式化按照Standard标准)：这个代码将会和之前的 ESLint统一介绍，也是与代码标准化相关的。
  3. Prettier-Standard - JavaScript formatter：这个插件也将之后统一介绍。是另一个插件的依赖。

Vue项目相关：

  1. Vetur（vscode官方推荐的Vue插件）：具体功能挺多自己看官方说明比较详细了，此处另特别点名吐槽次插件莫名其妙更新不支持美化html坑的我不要不要的。点我点我！！
  2. Vue 2 Snippets（Vue代码片段）：不用？你是想v-for、v-if都自己慢慢手打吗？？？
以上这些就是我的个性化插件库，希望对大家能有点作用
到了最后填坑的地方啦！就是我们又爱又恨的ESList！

什么是ESList呢？？？其定义是检测所编写的代码格式是否符合某种标准的插件。

这儿我推荐Js的代码标准为Standard。为了项目的可维护性与易读性，Standard是必须的！

如果你的Vue项目配置了ESList来检测代码是否标准的话，而你没有按照那个标准来编写代码，那么你的项目无法运行。然而比如Standard要求函数参数之前必须有空格，然而按照我们的习惯编写代码比较随性最后格式化下就OK了，说到这儿好像没什么大问题啊？？

咳咳划重点啦！vscode坑了我一晚上的地方到了，就是自身所携带的格式化并不符合Standard标准！！！！我的天每一次我编写完代码格式化一下就变成了不符合标准的代码！还有比这更坑爹的事情嘛！！于是我便开始折腾这个formatter使能让我格式化之后边符合Standard标准！

为了之后的配置，这边先给大家介绍几个概念：

  1. .eslintrc.js、.eslintignore：一个是eslint配置文件，一个是eslint忽略文件（功能等同于gitignore）如果你是用vue init出来的项目并选择了eslint来检测你的代码那么这个文件已经是由大神帮你配置好的不需要改动。如果你没有选择后面想要添加这个文件的话如何配置呢？！喂喂喂，别问我啊我是个菜鸟！
  2. .vscode文件夹：如果你安装了某些插件，你的项目下会出现一个.vscode文件夹，里面便是放了配置文件。而其中和格式化相关的就是下面这个！！
  3. .formatter.json：格式化文件，里面的内容便是将你的代码如何格式化。直接改动这个文件就能让你的代码符合Standard标准（这是我猜的，没深究这文件哈哈哈哈）。
  4. 文件->首选项->设置：我要为大家介绍的呢就是这个了 vscode的用户设置！！所有配置功能都在此处，不多说直接进入这个配置把。
用户配置界面就是如下了：


上方不是有个搜索框吗 输入farmat就可以出来很多的与格式化相关的配置啦，其中呢，有各大插件的格式化配置。

如果不想去理解可以直接跳过内容去观看我最后给出的我的用户配置。复制粘贴就好啦！

先提出个刺头给大家批评下：

"editor.formatOnSave": false,

就是这个了！使用vscode的小伙伴可能都有遇到过Ctrl+S保存之后自动格式化导致html标签一塌糊涂。罪魁祸首就这个配置了，大多数小伙伴被坑是因为安装了js-css-html formatter这个插件这个插件会自动将这个配置设置为true~~所以有些人出现这问题直接将这个插件卸载了就好啦。

不过今天重点不是这个！先看下图


很明显的！这些都是我们直接安装的插件配置，这个其他的东西细讲内容太多了，直接奔我们的重点，prettier-Standard -JavaScript formatter configuration、TypeScipt、vetur configuration
这3个地方使我们需要关注的，首先在vue项目中，我们使用的是.vue文件所以要想ESLint监控这种类型的文件我们需要先配置

"eslint.autoFixOnSave": true,
"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "vue-html"
],

将就看吧，上面内容就是保存自动ESLint自动检测代码，而检测代码的内容添加了vue文件和vue中的templete模块。

之后vscode中的vue文件格式化方面是由vetur掌控雷电的，而vetur的格式化依赖prettier！！并将html格式化设置为了“none”！（之前并不是如此，所以极其坑爹忍不住再次吐槽vetur！）所以现在大家思路差不多清楚了吧。

来个小总结：ESLint只是用作检测代码是否符合标准，而vscode的格式化呢具体来说是由多个插件掌控比如beautify。但是vue文件还是由vetur所控制

  // Default formatter for <template> region
  "vetur.format.defaultFormatter.html": "none",
  // Default formatter for <style> region
  "vetur.format.defaultFormatter.css": "prettier",
  // Default formatter for <style lang='postcss'> region
  "vetur.format.defaultFormatter.postcss": "prettier",
  // Default formatter for <style lang='scss'> region
  "vetur.format.defaultFormatter.scss": "prettier",
  // Default formatter for <style lang='less'> region
  "vetur.format.defaultFormatter.less": "prettier",
  // Default formatter for <style lang='stylus'> region
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  // Default formatter for <script> region
  "vetur.format.defaultFormatter.js": "prettier",
  // Default formatter for <script> region
  "vetur.format.defaultFormatter.ts": "prettier",
  // Options for all default formatters
  "vetur.format.defaultFormatterOptions": {    "js-beautify-html": {}  },

这段vetur配置就是vetur格式化的default配置啦。所以现在问题找到了！那么我们修改用户配置就好啦首先是html格式化，在vetur作者未推出他编写的格式化之前我们还是继续先使用
js-beautify-html！用户配置如下

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.ts": "vscode-typescript",

因为ESLint方面大多数要求偏向于ts。所以我们就干脆点把配置都给设置成ts的标准啦啦啦，不过细节方面还是有些不同之处，比如我之前提到过的函数参数之前需要空格所以呢我们这边再对typescript再做配置

    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true

就这样配置好了，现在编写完Vue文件格式化后就Emmmmmm，应该可能大概就符合ESLint啦。具体出现问题如果详细看了我之前的介绍相信你也能自己通过用户配置来修改vscode的格式化使的格式化能符合我们所需要的标准啦。

写在最后~~

这是我第二篇博文，大体详细地介绍了vscode这款萌新神器，但是想要使用熟练还是需要多使用的啦，比如适合自己的快捷键，用户代码段之类的，这些每个人都有每个人的习惯不好多干涉。如果这篇文章对大家有所帮助，希望大家能给我个赞！鼓励鼓励我！好啦前端萌新最后为大家附上几篇链接与我的用户配置。从上面跳下来的直接复制这儿吧！！

既然是vsCode的文章那么先吹一波吧：
如何评价 Visual Studio Code？（知乎）
vsCode快捷键大全（很有用也很没用）：
第二位大佬的回答！（不如有需求的时候打开vscode的快捷键设置自己看，还是看熟练度）
我的用户配置（这中间配置我取消掉了sync的配置，就是同步vscode的）：

{    
"window.zoomLevel": 0,
"files.autoSave": "off",    
"editor.fontSize": 15,        
"workbench.iconTheme": "vscode-icons",    
"workbench.activityBar.visible": true,    
"workbench.statusBar.visible": true,    
"workbench.sideBar.location": "left",    
"editor.minimap.enabled": false,    
"eslint.autoFixOnSave": true,    
"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "vue-html"    
],    
"vetur.format.defaultFormatter.html": "js-beautify-html",    
"vetur.format.defaultFormatter.js": "vscode-typescript",    
"vetur.format.defaultFormatter.ts": "vscode-typescript",    
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,    
"javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

最后想了下就提供我的gist配置吧
安装了Settings Sync插件之后使用shift+alt+d弹出一个框框要求你提供gist，emm我的配置码隐藏与上方的代码中~~~Good Bye！


avatar
文章
阅读
粉丝