使用VScode开发工具必装的插件

插件名

作用

Chinese (Simplified) Language Pack
VSCode 简体中文包
open in browser
alt + b 能够在浏览器中查看当前页面
Live Server代码保存,即可自动在浏览器中显示,无需重新刷新
Prettier - Code formatter
代码格式化工具
Auto Close Tag自动帮你闭合标签
Veturvue文件代码高亮插件-vscode中安装
VueHelper代码提示插件-vscode中安装
vscode-icons显示文件图标,方便准确查找文件,美化显示
GitLens-Git supercharged增强了Visual Studio代码中内置的Git功能。它可以帮助您通过Git注释和代码镜头一目了然地可视化代码作者身份,无缝地导航和探索Git存储库,通过强大的比较命令获得有价值的见解
koroFileHeader用于生成文件头部注释和函数注释的插件,可以提高团队的代码规范
ESLint帮助检查代码,规范我们写代码的格式, 看着整洁 / 团队内成员风格统一,提高代码质量

 

 

 

 

 

 

 

ESLint在VSCode中使用:

  • 一定要把脚手架工程, 作为vscode根目录, 因为eslint要使用配置文件.eslintrc。
  • 一定要配置插件监测的时机, 修改ESLint插件配置,边写代码, 让VSCode就提示ESLint规则,否则每次运行后, 才看到ESLint报错, 很累
  •  不用管别的, 把红框的放在{}内即可
    "eslint.run": "onType",
    "editor.codeActionsOnSave": {
    	"source.fixAll.eslint": true
    }
  • 随便文件里多敲击几个回车, vscode报错提示, 证明ESLint插件开始工作

  • ctrl + s 报错下是否能自动修复部分问题, 可以, 证明ESLint插件开始工作

  • 在.eslintrc.js文件中, 可以调整规则(团队内可以自定义自己一套)

koroFileHeader的settings.json配置

{
 //函数注释
  "fileheader.cursorMode": {
        
    "Description": "",
    "Author": "自己的名字",
    "param": "",
    "return": ""
},
// 头部注释
"fileheader.customMade": {
    "Description": "",
    "Author": "自己的名字",
    "Date": "Do not edit",
    "LastEditTime": "Do not Edit"
},
"fileheader.configObj": {
  "createFileTime": true,
  "language": {
      "languagetest": {
          "head": "/$$",
          "middle": " $ @",
          "end": " $/"
      }
  },
  "autoAdd": true,
  "autoAddLine": 100,
  "autoAlready": true,
  "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": false
  },
  "headInsertLine": {
  "headInsertLine": {
      "php": 4,
      "sh": 4
  },
  "beforeAnnotation": {
      "文件后缀": "该文件后缀的头部注释之前添加某些内容"
  },
  "afterAnnotation": {
      "文件后缀": "该文件后缀的头部注释之后添加某些内容"
  },
  "specialOptions": {
      "特殊字段": "自定义比如LastEditTime/LastEditors"
  },
  "switch": {
      "newlineAddAnnotation": true
  },
  "supportAutoLanguage": [],
  "prohibitAutoAdd": ["json"],
  "prohibitItemAutoAdd": [
      "项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
  ],
  "moveCursor": true,
  "dateFormat": "YYYY-MM-DD HH:mm:ss",
  "atSymbol": ["@", "@"],
  "atSymbolObj": {
      "文件后缀": ["头部注释@符号", "函数注释@符号"]
  },
  "colon": [": ", ": "],
  "colonObj": {
      "文件后缀": ["头部注释冒号", "函数注释冒号"]
  },
  "filePathColon": "路径分隔符替换",
  "showErrorMessage": false,
  "wideSame": false,
  "wideNum": 13,
  "CheckFileChange": false,
  "createHeader": true,
  "useWorker": false,
  "designAddHead": false,
  "headDesignName": "random",
  "headDesign": false,
  "cursorModeInternal": false
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"git.ignoreWindowsGit27Warning": true,
// 是否允许自定义的snippet片段提示
"editor.snippetSuggestions": "top",
"editor.fontWeight": "400",
"guides.enabled": false,
"git.confirmSync": false,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
// 配置文件关联,以便启用对应的提示
"files.associations": {
  "*.vue": "vue",
  "*.wxss": "css",
  "*.cjson": "jsonc",
  "*.wxs": "javascript"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持
"emmet.syntaxProfiles": {
  "javascript": "jsx",
  "vue": "html",
  "vue-html": "html"
},
// eslint配置文件
"eslint.options": {
  "extensions": [".js", ".vue"]
},
// eslint能够识别的文件后缀类型
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
      "language": "vue",
      "autoFix": true
  },
  {
      "language": "html",
      "autoFix": true
  },
  "vue",
  "html"
],
"search.exclude": {
  "**/node_modules": true,
  "**/bower_components": true,
  "**/dist": true
},
"vetur.format.defaultFormatter.html": "prettier",
// 格式化快捷键(默认):Shift+Alt+F
// prettier进行格式化时,开启eslint支持
"prettier.eslintIntegration": false,
"prettier.tabWidth": 4,
"prettier.tabSize": 4,
"editor.tabSize": 4,
// 是否使用单引号
"prettier.singleQuote": true,
"dart.flutterSdkPath": "/Applications/flutter",
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true,
"emmet.includeLanguages": {
  "wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.autoIndent": "false",
"editor.autoClosingQuotes": "always",
"javascript.format.placeOpenBraceOnNewLineForFunctions": true,
"typescript.format.placeOpenBraceOnNewLineForFunctions": true,
"C_Cpp.vcFormat.newLine.scopeBracesOnSeparateLines": true,
"javascript.format.insertSpaceAfterConstructor": true,
"vetur.format.options.tabSize": 4,
"vetur.format.options.useTabs": true,
"workbench.editor.enablePreview": true,
"[vue]": {
  "editor.defaultFormatter": "svipas.prettier-plus"
},
"[jsonc]": {
  "editor.defaultFormatter": "svipas.prettier-plus"
},
"workbench.colorTheme": "One Dark Pro",
"terminal.integrated.automationShell.windows": "",
"terminal.integrated.shellArgs.windows": ["-NoLogo"], // 方法1.忽略打印出来的 版本信息
"python.jediEnabled": false,
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"workbench.iconTheme": "vscode-icons",
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.enableSmartCommit": true,
"diffEditor.ignoreTrimWhitespace": false,
"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.editor.untitled.hint": "hidden",
"vsicons.dontShowNewVersionMessage": true,
"workbench.statusBar.visible": true
}
}

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1,create.ZIP 不用OCX来创建自己的控件(4KB)2,rganimate.ZIP 动画控件(35KB)3,rgassistant.ZIP 允许你创建一个Microsoft Office97那样的助手!(65KB)4,rgsysmoncal.ZIP 日期控件(35KB)5,datadrn.ZIP 创建数据驱动窗体(7KB)6,tooltip.zip 利用VB建立ToolTip窗口(4KB)7,trans.zip 建立透明的窗口(2KB)8,Anicur.zip 在窗口中建立动画光标(2KB)9,toolbar.zip 建立浮动工具栏的例程(22KB)10,winrgn.zip 建立不规则的窗口(2KB)11,winhole.zip 建立一个中间有洞的窗口(2KB) 12,split.zip 分割窗口并动态调整分割区域(类似于Windows中的资源管理器)(18KB)13,rubrect.zip 在屏幕上出现抓取窗口(8KB)14,hidebtn.zip 隐藏Win9X中任务栏上的“开始”按钮(2KB)15,console.zip 利用API函数建立控制台窗口(4KB)16,startinm.zip 将一个程序的窗口作为你的窗口的MDI子窗口(3KB)17,desktop.zip 一个可以动态排列桌面图标和动态改变屏幕分辨率的程序(29KB)18,rgdock.zip 建立类似Office工具栏的Docking Window(56KB)19,comboex.zip 一个非常cool的范例,可以在窗口中建立一个类似于Windows Explore的地址栏中的图标下拉ComboBox。其中还包含了其它的许多技巧(32KB)20,dyncontrol.zip 动态建立控件的范例(3KB)21,listitemdrag.zip 演示如何将列表框中的条目拖放到另外一个列表框中(2KB)22,ownerdrawmenu.zip 演示建立图形菜单,同一般的图形菜单不同,通过该程序建立的菜单当光标移动到菜单项上时,该项一样可以象Word97菜单项一样突出显示(11KB)23,traybar.zip 一个可以隐藏任务栏(Traybar)上的开始按钮、Switch Bar、快速启动按钮、任务栏图标、桌面图标的程序(3KB)24,windowsplacement.zip 更改Windows程序在Switch bar上的位置(3KB)25,tooltips.zip 利用Windows API实现的可显示多行文字的ToolTip(5KB)26,deskicon.zip 当你设置Windows的桌面墙纸之后,是否觉得桌面图标文字下的色块十分碍眼呢,这个程序可以使图标文字透明的显示在桌面上。还可以改变桌面图标文字的颜色以及图标文字下色快的颜色(2KB)27,animatedtitlebar.zip 这个程序可以使你的窗口的Title Bar动起来。很有趣的(26KB)28,resizr.zip 一个带源码以及演示的Resizer控件,就象Windows资源管理器的文件夹列表同文件列表之间的Resizer棒一样(7KB)29,taskbar.zip 一个带源码以及演示的TaskBar控件,可以让你的窗口象Windows的TaskBar一样(6KB)30,xeditor.zip 一个利用VB编写的功能比较完备的文本编辑器(172KB)31,custominputbox.zip 这个程序演示如何改变缺省的InputBox的外貌(10KB)32,controlpopmenu.zip 这个程序演示如何控制控件的缺省弹出菜单(例如TextBox),是完全控制而不只是隐藏和显示(3KB)33,coolmenu.zip 一个很Cool的菜单程序,可以把你的菜单改造成象Office系列的带图标的菜单(33KB)34,covereffect.zip 一个实现程
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值