所有插件只按照类型区分,每一类型的插件不区分先后顺序。
基本插件
Beautify
美化javascript,JSON,CSS,Sass和HTML
Chinese (Simplified) Language Pack for Visual Studio Code
vs code简体中文包,安装后,在 locale.json 中添加 “locale”: “zh-cn”,即可载入中文(简体)语言包。要修改 locale.json,你可以同时按下 Ctrl+Shift+P 打开命令面板,之后输入 “config” 筛选可用命令列表,最后选择配置语言命令。
ESLint
js,ts代码格式检查,默认根据内置的代码语法检查规则进行代码校验并标记出不符合规范的代码。
filesize
在编辑器的状态栏中显示焦点文件的大小。如果单击状态栏组件,它将显示有关该文件的更多信息!
HTML CSS Support
给HTML文档提供css支持。css属性提醒和补全。
HTML Snippets
添加对h5标签库的支持。
HTMLHint
将HTMLHint静态分析工具集成到Visual Studio代码中。
HTMLHint扩展将在打开的HTML文件上运行HTMLHint,并在“状态栏”中报告错误数量,并在“问题”面板中查看详细信息(“查看”>“问题”)。
HTML文件中的错误以波形突出显示,您可以将鼠标悬停在曲线上以查看错误消息。
HTMLHint扩展使用HTMLHint提供的默认规则。HTMLHint仅分析打开的HTML文件,不会在项目文件夹中搜索HTML文件。
jQuery Code Snippets
提供常用jquery代码片段支持,在js文件中输入jq以查看支持的代码片段。
jshint
一种有助于检测JavaScript代码中的错误和潜在问题的工具。
npm
此扩展支持运行package.json文件中定义的npm脚本,并根据package.json中定义的依赖项验证已安装的模块。
检查在package.json中定义,但未安装;已安装但未在package.json中定义;已安装但不满足package.json中定义的版本。并且为报告的警告提供了运行npm的快速修复程序。并且在命令面板(cmd-shift-p)提供了运行脚本的命令,输入npm以进行查看。
npm Intellisense
用于在import语句中自动填充npm模块。
在命令面板(cmd-shift-p)中选择Install Extension并选择npm Intellisense。及其他功能。
Path Autocomplete
提供路径提示和填充支持。
SVG Viewer
提供.svg图片的预览支持。
SVN
提供svn扩展的支持,需要已经安装svn客户端并开启命令行工具。
在左侧工具栏添加svn图标,支持查看本地修改,查看提交历史,提交代码等功能。
TODO Highlight
添加TODO高亮显示功能,在未完成的功能处添加TODO标识,支持在文件中高亮显示及底部输出栏显示。
vscode-icons
给各种类型的文件增加图标支持。
angular效率提高
Angular 7 and TypeScript/HTML VS Code Snippets
适用于angular7的ts,html代码片段集合。
Angular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
同样是一款代码片段集合,支持更多类型。支持 Angular 2,4,5,6, 7 & 8 Beta.
Angular Extension Pack
用于开发angular的常用的流行的扩展包集合,包括:
【Debugger for Chrome】 从VS Code调试在Google Chrome中运行的JavaScript代码。
【Prettier - Code formatter】 使用Prettier格式化您的JavaScript / TypeScript / CSS。Prettier是一个代码格式化程序。
【Path Intellisense】路径提示,路径及文件名补全。
【Auto Close Tag】 自动添加html/xml中标签对的结束标签,
【Auto Rename Tag】 重命名一个HTML / XML标记时,会自动重命名配对的HTML / XML标记
【EditorConfig for VS Code】 自动根据文件扩展名指定相应的缩进长度,tab长度,保存时最后一行必须是空行等编辑器样式。尝试使用.editorconfig文件中的设置覆盖用户/工作区设置。不需要其他或特定于vscode的文件。与任何EditorConfig插件一样,如果未指定root = true,EditorConfig将继续在项目外部查找.editorconfig文件。
【TSLint】 是一个代码检查工具,用于检查ts代码的可读性,可维护性及功能性错误,可以配置自定义校验规则。检查代码语法,格式等,帮助修改ts代码中的错误。未来会被弃用并升级到ESLint。
【Auto Import】 当你使用一个未引入的包时它可以提供自动导入相应的包。
【TypeScript Hero】 根据约定对导入进行排序和组织,并删除未使用的导入(在Win / Linux上按Ctrl + Alt + o或在MacOS上按Ctrl + Opt + o)。
【Move TS - Move TypeScript files and update relative imports 移动一个ts文件的时候自动更新引用该文件的所有文件对应的导入路径。
可以帮助您重构和重新组织项目中的一些文件和组件。它会自动修复正在移动的文件(或组件文件夹)上的导入以及导入正在移动的组件的文件。要使用它:右键单击Project Explorer窗格中的文件或文件夹,然后选择“Move TypeScript”。
【json2ts】将JSON从剪贴板转换为TypeScript接口。 (Ctrl + Alt + V)
【Angular v7 Snippets】一些针对angular的TypeScript和HTML代码片段。
【Angular Language Service】 angular语言支持包,为Angular模板提供丰富的编辑体验,在处理Angular HTML模板时非常有用
【Angular 2, 4 and upcoming latest TypeScript HTML Snippets】包含了Angular2,4,以及更高版本的框架中常用的ts,html片段,输入相应的代码片段名称并回车就可以快速的创建模板,避免了创建模块的很多重复代码。如angComponent
或ngFor
。
【angular2-switcher】在angular2项目中轻松导航到组件。typescript(.ts)| template(.html)| style(.scss / .sass / .less / .css)。
使用快捷键跳转到一个模块的ts,html,scss文件。或在html中转到一个函数的定义。
【Angular Schematics】 通过在项目目录右键的方式创建新的模块,服务,组件等。
【AngularDoc for Visual Studio Code】在最左侧菜单栏增加一个angular图标,用于angular项目的模块、组件,结构可视化
【Angular Material 2, Flex layout 1, Covalent 1 & Material icon snippets】 给Material 2, Flex layout 1, Covalent 1 & Material 这些模块提供代码片段支持。
【SimonTest】分析您的Angular代码并为您生成单元测试(可以覆盖使用Angular CLI自动生成的spec文件)。
【Angular 2 TypeScript Test Snippets】Angular 2 TypeScript测试片段。
【NG.42 TS Helpers】 添加基本辅助命令以使用Angular 2和TypeScript。用于创建带有导出当前目录所有模块的index.ts
vue效率提高
Vue 2 Snippets
支持vue2的代码片段,标签,指令等。