编辑器在日常开发的作用越来越大了，随着Vscode编辑器在前端开发的普及，vscode编辑器的插件也在逐渐为前端工程化的提供助力。

基础插件

一、ESLint

eslint vscode插件,能够高亮提示出代码中的错误

image.png

插件不生效

在设置 -> eslint -> settings.json 中添加下列代码即可

  1. "eslint.validate": [
  2.   "javascript",
  3.   "javascriptreact",
  4.   "typescript",
  5.   "typescriptreact"
  6. ],
  7. "eslint.codeAction.showDocumentation": {
  8.   "enable": true
  9. },
  10. "eslint.format.enable": true,
  11. "eslint.probe": [
  12.   "javascript",
  13.   "javascriptreact",
  14.   "typescript",
  15.   "typescriptreact",
  16.   "html",
  17.   "vue",
  18.   "markdown"
  19. ]

二、GitLens

git管理工具

image.png

三、Code Spell Checker

单词拼写检查

image.png

四、Todo Tree

用于代码中进行标记

image.png

五、EditorConfig for VS Code

代码风格规范,简单的说就是不让你再头疼tab还是space缩进

image.png

使用

  • 在当前项目根目录下添加 .editorconfig 文件

    配置项

    待补充

六、Debugger for Chrome

vscode的chrom浏览器联调工具

image.png

七、Document This

自动生成jsdoc

image.png

使用

Ctrl+Alt+D 两次

八、Tailwind CSS IntelliSense

配合tailwindcss使用提示工具

image.png

九、Prettier - Code formatter

格式化代码工具

image.png

十、koroFileHeader

快速生成文件头部

  1. /*
  2.  * @author: 庞皓元
  3.  * @Date: 2021-08-09 21:02:16
  4.  * @LastEditTime: 2021-08-15 22:22:44
  5.  * @LastEditors: 庞皓元
  6.  * @Description:
  7.  * @FilePath: \huidu.admin\src\pages\cdk\batchList\index.tsx
  8.  * 可以输入预定的版权声明、个性签名、空行等
  9.  */

十一、Codesnap

获取代码快照

十二、Postcode

简易版postman

十三、

摸鱼插件

一. 小霸王

童年回忆
ps： 炸弹超人yyds

二、LeetCode

摸鱼? 不存在的。。。提升算法好不好。。。但是对公司来说你就是在摸鱼

三、leek-fund（韭菜盒子）

不想当韭菜的程序员，不是好程序员
你以为我在炒股，其实我在为国家产业升级提供资金支持，为实现中华民族伟大复兴提供助力！！！