下载VSCode下载地址vscode下载VSCode插件下载插件下载站chinese中文beautify格式化代码工具美化javascriptJSONCSSSass和HTML在Visual Studio代码。// 配置beautify格式化配置beautify.config:{// 配置对大括号的格式化是否行内不自动换行brace_style:collapse,preserve-inline,// 配置缩减字符 4indent_size:4,// 如果需要配合eslint请打开jslint_happy:false},// 如果没有就添加你需要的格式化文件后缀添加默认为beautify[vue]:{editor.defaultFormatter:HookyQR.bseautify},[js]:{editor.defaultFormatter:HookyQR.beautify},[css]:{editor.defaultFormatter:HookyQR.beautify},[less]:{editor.defaultFormatter:HookyQR.beautify},[scss]:{editor.defaultFormatter:HookyQR.beautify},// 开启默认保存即格式化editor.formatOnSave:true,prettier格式化代码工具html css support智能提示CSS类名以及idhtml Snippets智能提示HTML标签以及标签含义jquery code snippetsjQuery代码智能提示open in browser编辑的HTML文件等用谷歌浏览器打开path intellisense自动提示文件路径支持各种快速引入文件bracket pair colorizer 2彩虹括号使用该插件可以用不同颜色区分出代码中的括号对于括号很多的代码非常实用。该插件还支持自定义括号颜色。settings.json原生editor.bracketPairColorization.enabled:true,editor.guides.bracketPairs:active,editor.guides.bracketPairsHorizontal:active,editor.guides.highlightActiveBracketPair:true,editor.matchBrackets:always,workbench.colorCustomizations:{// 括号文字颜色实心不透明editorBracketHighlight.foreground1:#ffcb2f,editorBracketHighlight.foreground2:#73d0ff,editorBracketHighlight.foreground3:#ff7cc0,editorBracketHighlight.foreground4:#b388ff,editorBracketHighlight.foreground5:#42d392,editorBracketHighlight.foreground6:#ff8a4c,// 竖线颜色和上面一一对应加透明度aaeditorBracketPairGuide.background1:#ffcb2f20,editorBracketPairGuide.background2:#73d0ff20,editorBracketPairGuide.background3:#ff7cc020,editorBracketPairGuide.background4:#b388ff20,editorBracketPairGuide.background5:#42d39220,editorBracketPairGuide.background6:#ff8a4c20,editorBracketPairGuide.activeBackground1:#ffcb2faa,editorBracketPairGuide.activeBackground2:#73d0ffaa,editorBracketPairGuide.activeBackground3:#ff7cc0aa,editorBracketPairGuide.activeBackground4:#b388ffaa,editorBracketPairGuide.activeBackground5:#42d392aa,editorBracketPairGuide.activeBackground6:#ff8a4caa}效果Color Highlight设置 CSS 颜色的样式此扩展可以用来设置 CSS 颜色的样式。除了 CSS 之外它还会对不显示默认颜色的 JavaScript、HTML、JSON 等文件进行着色。该插件会对颜色名称、RGB、RGBA 和十六进制颜色进行着色。效果Auto Close Tag:自动补全结束标签插件用于自动补全HTML结束标签。Auto Rename Tag自动重命名 HTML 标签的开始和结束标签使用该插件可以在重命名一个 HTML 标签时自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。CSS Peek :css样式快速定位CSS Peek 插件允许我们在 HTML 中选择某个 class 或者 id 名称按住Ctrl键鼠标左键可以直接定位到该名称的CSS的位置。使用链接gitlens(平替 gitLess)git插件GitLens 增强了 Visual Studio Code 中内置的 Git 功能。它可以帮助我们更好地理解代码快速了解更改行或代码块的人员、原因和时间。githistorygit显示提交历史VeturVue 开发必备插件它为 Vue.js 提供了实用的工具例如调试、错误检查、语法高亮、片段等。Vue(Official) vue-helperVue Ctrl左键跳转可实现函数方法引用样式点击定位。ESLint格式校验// vscode格式化{// 启用 ESLint 插件eslint.enable:true,// 【注意】旧版配置新版已废弃替换为下方的 editor.codeActionsOnSave// eslint.autoFixOnSave: true,// 配置保存时自动执行 ESLint 修复editor.codeActionsOnSave:{source.fixAll.eslint:true},// 指定 ESLint 运行时机onType(输入时) / onSave(保存时)推荐 onSave 减少性能消耗eslint.run:onSave,// ESLint 检测的文件扩展名eslint.options:{extensions:[.js,.vue]},// ESLint 要校验的语言类型修正重复/冗余配置eslint.validate:[javascript,javascriptreact,vue,html]}ES7 React/Redux/React-Native snippetsReact语法智能提示React 开发者必备。借助此代码段可以轻松创建基于类的组件、function组件。REST ClientVS Code 的 PostmanREST Client 允许发送 HTTP 请求并直接在 VS Code 中查看响应。它是 VS Code 的 Postman可以方便地集成到代码编辑器中。REST 客户端同时支持 REST 和 GraphQL API。IntelliCode智能的代码建议IntelliCode 旨在帮助开发人员提供智能的代码建议。它默认支持 Python、TypeScript/JavaScript、React 和 Java。IntelliCode 将最有可能使用的内容放在列表的顶部从而节省时间。IntelliCode 建议基于 GitHub 上的数千个开源项目。Code Runner代码运行npm Intellisense智能提示安装的npm包内容npm 安装包之后在 require 时提供该插件可以获得智能提示import 语句中自动填充 npm 模块。Image preview图片预览通过此插件当鼠标悬浮在图片的链接上时可以实时预览该图片除此之外还可以看到图片的大小和分辨率。效果Tabnine帮助完成代码的输入Tabnine 是一个多语言的插件可以自动帮助我们完成代码的输入。Tabnine 的目标是通过基于 AI 的系统提高开发人员的生产力。Live Server实时服务器实时查看开发的网页或项目效果Live Server是一个具有实时加载功能的小型服务器可以在项目中用live-server作为一个实时服务器实时查看开发的网页或项目效果。它是为静态和动态页面启动具有实时重新加载功能的本地开发服务器在状态栏中单击即可启动或停止服务器。VSCode-Icons文件图片插件VSCode-Icons 是一个文件图片插件可以为项目不同类型的文件赋予不同的图标。让我们更容易区分不同的文件类型。安装完成之后按照以下步骤进行使用文件 → 首选项 → 文件图标主题 → VSCode-Icons。效果thief book书阅读background添加背景图片{background.useDefault:false,background.customImages:[D:/美图/6.jpg,D:/美图/3.jpg,D:/美图/6.jpg],background.style:{content:,pointer-events:none,top:0,left:0,width:100%,height:100%,z-index:99999,background.repeat:no-repeat,background-size:contain,opacity:0.1},editor.minimap.enabled:false,}注意安装此插件可能会出现一个 “code损坏” 的提示官方会给出建议卸载重装但我们其实只需要下载一个插件Fix VSCode Checksums具体操作如下图标material icon themevscode-icons显示Visual Studio代码的图标目前该插件已被vscode内部支持“文件” - “首选项” - “文件图标主题”主题material themeaurora xfirefly pro好看主题地址30个实用插件
VScode 常用插件合集
下载VSCode下载地址vscode下载VSCode插件下载插件下载站chinese中文beautify格式化代码工具美化javascriptJSONCSSSass和HTML在Visual Studio代码。// 配置beautify格式化配置beautify.config:{// 配置对大括号的格式化是否行内不自动换行brace_style:collapse,preserve-inline,// 配置缩减字符 4indent_size:4,// 如果需要配合eslint请打开jslint_happy:false},// 如果没有就添加你需要的格式化文件后缀添加默认为beautify[vue]:{editor.defaultFormatter:HookyQR.bseautify},[js]:{editor.defaultFormatter:HookyQR.beautify},[css]:{editor.defaultFormatter:HookyQR.beautify},[less]:{editor.defaultFormatter:HookyQR.beautify},[scss]:{editor.defaultFormatter:HookyQR.beautify},// 开启默认保存即格式化editor.formatOnSave:true,prettier格式化代码工具html css support智能提示CSS类名以及idhtml Snippets智能提示HTML标签以及标签含义jquery code snippetsjQuery代码智能提示open in browser编辑的HTML文件等用谷歌浏览器打开path intellisense自动提示文件路径支持各种快速引入文件bracket pair colorizer 2彩虹括号使用该插件可以用不同颜色区分出代码中的括号对于括号很多的代码非常实用。该插件还支持自定义括号颜色。settings.json原生editor.bracketPairColorization.enabled:true,editor.guides.bracketPairs:active,editor.guides.bracketPairsHorizontal:active,editor.guides.highlightActiveBracketPair:true,editor.matchBrackets:always,workbench.colorCustomizations:{// 括号文字颜色实心不透明editorBracketHighlight.foreground1:#ffcb2f,editorBracketHighlight.foreground2:#73d0ff,editorBracketHighlight.foreground3:#ff7cc0,editorBracketHighlight.foreground4:#b388ff,editorBracketHighlight.foreground5:#42d392,editorBracketHighlight.foreground6:#ff8a4c,// 竖线颜色和上面一一对应加透明度aaeditorBracketPairGuide.background1:#ffcb2f20,editorBracketPairGuide.background2:#73d0ff20,editorBracketPairGuide.background3:#ff7cc020,editorBracketPairGuide.background4:#b388ff20,editorBracketPairGuide.background5:#42d39220,editorBracketPairGuide.background6:#ff8a4c20,editorBracketPairGuide.activeBackground1:#ffcb2faa,editorBracketPairGuide.activeBackground2:#73d0ffaa,editorBracketPairGuide.activeBackground3:#ff7cc0aa,editorBracketPairGuide.activeBackground4:#b388ffaa,editorBracketPairGuide.activeBackground5:#42d392aa,editorBracketPairGuide.activeBackground6:#ff8a4caa}效果Color Highlight设置 CSS 颜色的样式此扩展可以用来设置 CSS 颜色的样式。除了 CSS 之外它还会对不显示默认颜色的 JavaScript、HTML、JSON 等文件进行着色。该插件会对颜色名称、RGB、RGBA 和十六进制颜色进行着色。效果Auto Close Tag:自动补全结束标签插件用于自动补全HTML结束标签。Auto Rename Tag自动重命名 HTML 标签的开始和结束标签使用该插件可以在重命名一个 HTML 标签时自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。CSS Peek :css样式快速定位CSS Peek 插件允许我们在 HTML 中选择某个 class 或者 id 名称按住Ctrl键鼠标左键可以直接定位到该名称的CSS的位置。使用链接gitlens(平替 gitLess)git插件GitLens 增强了 Visual Studio Code 中内置的 Git 功能。它可以帮助我们更好地理解代码快速了解更改行或代码块的人员、原因和时间。githistorygit显示提交历史VeturVue 开发必备插件它为 Vue.js 提供了实用的工具例如调试、错误检查、语法高亮、片段等。Vue(Official) vue-helperVue Ctrl左键跳转可实现函数方法引用样式点击定位。ESLint格式校验// vscode格式化{// 启用 ESLint 插件eslint.enable:true,// 【注意】旧版配置新版已废弃替换为下方的 editor.codeActionsOnSave// eslint.autoFixOnSave: true,// 配置保存时自动执行 ESLint 修复editor.codeActionsOnSave:{source.fixAll.eslint:true},// 指定 ESLint 运行时机onType(输入时) / onSave(保存时)推荐 onSave 减少性能消耗eslint.run:onSave,// ESLint 检测的文件扩展名eslint.options:{extensions:[.js,.vue]},// ESLint 要校验的语言类型修正重复/冗余配置eslint.validate:[javascript,javascriptreact,vue,html]}ES7 React/Redux/React-Native snippetsReact语法智能提示React 开发者必备。借助此代码段可以轻松创建基于类的组件、function组件。REST ClientVS Code 的 PostmanREST Client 允许发送 HTTP 请求并直接在 VS Code 中查看响应。它是 VS Code 的 Postman可以方便地集成到代码编辑器中。REST 客户端同时支持 REST 和 GraphQL API。IntelliCode智能的代码建议IntelliCode 旨在帮助开发人员提供智能的代码建议。它默认支持 Python、TypeScript/JavaScript、React 和 Java。IntelliCode 将最有可能使用的内容放在列表的顶部从而节省时间。IntelliCode 建议基于 GitHub 上的数千个开源项目。Code Runner代码运行npm Intellisense智能提示安装的npm包内容npm 安装包之后在 require 时提供该插件可以获得智能提示import 语句中自动填充 npm 模块。Image preview图片预览通过此插件当鼠标悬浮在图片的链接上时可以实时预览该图片除此之外还可以看到图片的大小和分辨率。效果Tabnine帮助完成代码的输入Tabnine 是一个多语言的插件可以自动帮助我们完成代码的输入。Tabnine 的目标是通过基于 AI 的系统提高开发人员的生产力。Live Server实时服务器实时查看开发的网页或项目效果Live Server是一个具有实时加载功能的小型服务器可以在项目中用live-server作为一个实时服务器实时查看开发的网页或项目效果。它是为静态和动态页面启动具有实时重新加载功能的本地开发服务器在状态栏中单击即可启动或停止服务器。VSCode-Icons文件图片插件VSCode-Icons 是一个文件图片插件可以为项目不同类型的文件赋予不同的图标。让我们更容易区分不同的文件类型。安装完成之后按照以下步骤进行使用文件 → 首选项 → 文件图标主题 → VSCode-Icons。效果thief book书阅读background添加背景图片{background.useDefault:false,background.customImages:[D:/美图/6.jpg,D:/美图/3.jpg,D:/美图/6.jpg],background.style:{content:,pointer-events:none,top:0,left:0,width:100%,height:100%,z-index:99999,background.repeat:no-repeat,background-size:contain,opacity:0.1},editor.minimap.enabled:false,}注意安装此插件可能会出现一个 “code损坏” 的提示官方会给出建议卸载重装但我们其实只需要下载一个插件Fix VSCode Checksums具体操作如下图标material icon themevscode-icons显示Visual Studio代码的图标目前该插件已被vscode内部支持“文件” - “首选项” - “文件图标主题”主题material themeaurora xfirefly pro好看主题地址30个实用插件
)
