vscode 前端常用的插件

插件列表:

Color Info 

     这个便捷的插件,将为你提供你在CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。

代码片段比对

Partial Diff

SVN

       不解释

Vetur

  —— 语法高亮、智能感知、Emmet等

包含格式化功能,Alt+Shift+F(格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

EsLint

  —— 语法纠错

JavaScript(ES6) code snippets

    —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

Path Intellisense

   —— 自动路劲补全

HTML CSS Support 

     —— 让 html 标签上写class 智能提示当前项目所支持的样式

vue

emmet

Chinese

   设置简体中文    //中文

Auto Rename Tag 

  //自动重命名配对的HTML / XML标签(必备)

Beautify

  //格式化javascript,JSON,CSS,Sass,和HTML

Class autocomplete for HTML  

    //智能提示HTML class =“”属性(必备)

Code Runner

 //非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安装完成后,右上角出现:

点击这个按钮就可以运行你的文件了(必备)

Debugger for Chrome  

    //让vscode映射 chrome 的 debug功能,使静态页面都可以用 vscode 来打断点调试

Document This  

//添加注释块

Filesize

 //在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

Git History

以图表的形式查看git日志

使用command+shift+p(Ctrl+shift+p) 输入git log就可以看到了

GitLens 

     可以增强 VSCode 内置 Git 的功能。例如 commits 搜索,历史记录和显示的代码作者身份具体功能可以查看Feature list

git日志插件

HTML Snippets

html代码片段(必备)

htmlhint

html代码检测

htmltagwrap

可以在选中HTML标签中外面套一层标签

使用:选择一大段代码,然后按“Alt + W”

Indenticator

突出目前的缩进深度

IntelliSense for CSS class names

智能提示css 的 class 名

Image Preview

鼠标移到路径里显示图像预览

JavaScript Snippet Pack

js代码片段(必备)

jQuery Code Snippets

jQuery代码片段

 自动提示jquery,如果是你一个重度JQ使用者,可以考虑安装

Live Sass Compiler

实时编译sass ,不过需要配置,附上我的配置

"liveSassCompile.settings.formats":[   // You can add more    {

    "format": "compressed",//压缩

      "extensionName": ".min.css",//编译后缀名

       "savePath": "./css"//编译保存的路径

 }

   ],

使用

markdownlint

markdown语法检查

Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块。

 npm Intellisense

在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多

open in browser

当前的html文件用浏览器打开,类似 webstorm 的那四个小浏览器图标功能,前提条件html 文件必须保存

快捷键alt+b

Output Colorizer

输出提示的文字颜色有一些变化,方便获取关键信息

 Prettier

格式化JavaScript / TypeScript / CSS。

Project Manager

工程项目过多时,shift+cmd+p(shift+ctrl+p)然后输入project,第一次选择edit Project编辑自己的工程项目,之后就可以直接选择open打开你的项目

Sass

写sass必备

 vscode-faker

生成假数据,地址,电话,图片等等

打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了

Quokka.js

实时观看javascript的变量的变化

使用:先shift+cmd+p (ctrl+shift+p)输入 quokka 选择 new javascript 就行了�

Regex Previewer

测试正则的插件

 TSLint

检查typescript编程时的语法错误语法

TypeScript Importer

自动搜索工作区文件中的TypeScript定义,并将所有已知符号作为完成项,以允许代码完成。

vscode-icons

目录树图标

react

React-Native/React/Redux snippets for es6/es7

react代码片段,下载人数超多�

VueHelper   

vue代码片段

vue-helper (支持CTRL+点击函数跳转 || 绑定对象跳转)

vscode怎么快速查看vue的函数定义

参考:https://blog.csdn.net/Amouzy/article/details/123282132

Vue TypeScript Snippets

vue的 typescript 代码片段

Vue 2 Snippets

vue 2代码片段

Typings Installer              

                  ——安装vscode 的代码提示依赖库,基于typtings的,比如提示angular或者jQuery智能感知

JS-CSS-HTML Formatter   

                     ——代码对齐。每次保存代码的时候它会自动对齐代码

主题

Dracula Official

个人最喜欢的主题,应该是最好看的主题之一

One Dark Pro

这个也好看

Atom One Dark Theme(老版本)

这个和One Dark Pro差不多,One Dark Pro颜色主题多一些

One Monokai Theme

Eva Theme

里面包含黑色和白色主题,这个白色主题感觉挺好看的

Boxy Theme Kit

Ayu

Ayu提供三种不同的颜色变体,包括深色,浅色和海市rage楼。

它还允许用户使用其自定义的Ayu图标包来实现工作台的统一外观。

该主题是使用Java构建的,因此很容易对其进行修改或扩展其功能。

您可以轻松地从其GitHub存储库中派生此主题,并在此主题之上开始构建。


vscode设置显示代码缩略图

文件–首选项–设置 搜索 minimap 打上对勾就可以了

Bracket Pair Colorizer

颜色识别匹配括号

VS Code 1.63.1自身已经支持了 ,通过在settings.json添加如下配置{"editor.bracketPairColorization.enabled": true,"editor.guides.bracketPairs":"active"}

Code Spell Checker 单词拼写检查

     检测代码中单词拼写正确性

      我们在编写代码的时候经常会不小心拼写错误造成软件运行失败,安装这个插件后会自动帮我们识别单词拼写错误并且给出修改建议,大大帮我们减轻了排除bug的压力。

 CSS Peek

使用此插件,你可以追踪至样式表中CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

Better Align

  #对齐用的,设置一下快捷键 Ctrl + Alt + =,对块自动等号对齐

Import Cost

引入包大小计算,对于项目打包后体积掌握很有帮助

HTML Boilerplate

通过使用HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。

TODO Highlight

这个插件能够在你的代码中标记出所有的TODO 注释,以便更容易追踪任何未完成的业务。在默认的情况下,它会查找 TODO 和 FIXME 关键字。当然,你也可以添加自定义表达式。

Rainbow Brackets

为圆括号,方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员,当然还有JavaScript和其他程序员特别有用。

效果如下:

Indent-Rainbow

用四种不同颜色交替着色文本前面的缩进

scss IntelliSense   scss 智能提示,补全

AutoFileName (文件路径自动补全插件)

       当你需要 require 本地文件时,这个插件将为你提供基于你输入的文件路径的自动补全的选项。

Pigment    

遇到颜色代码时,Pigment会将颜色渲染在这段代码的下面。

Settings Sync

Settings Sync 提供了同步个人设置的功能,当我们需要换电脑进行开发时,比如回家用自己的电脑,或者换了新的电脑,该插件可以帮你同步之前做的设置,不需要在每台电脑上都重新设置一次。

vscode 选中后相同内容高亮插件推荐

highlight-icemode

   first step

ctrl + shift + p 打开 command panel , 输入 preferences: open user settings 打开用户设置,找到 highlight-icemode 配置项

secode step

将左侧内容复制到右侧可编辑tab 中,设置上自己想要的颜色就ok了。


{

    // Set backgroundColor

    "highlight-icemode.backgroundColor": "red",

    // Set Border Color

    "highlight-icemode.borderColor": "blue"

}

vscode中选择HTML标签对高亮

扩展插件中,安装这个插件“VSCode Highlight Matching Tag”

vs code这个编辑器,如果高亮显示对应的标签?

我一点div, vs code这个编辑器把所有的div都高亮了,但是只想高亮闭合的那个div,该怎么设置呢?谢谢


这个问题也困惑我很久了,brackets就可以很好的实现,但是其他功能又没有vsc好用,纠结。

问题解决,把正在编辑的文件识别为html就可以显示高亮显示对应标签了。php文件 

手动识别为

,就可以了

vue-beautify

vue文件格式化,有三种用法

1、快捷键ctrl+shift+f ;

2、在文件中右键选择Beautify Vue ;

3、按f1,搜索 Beautify Vue然后点击.

拓展插件

这部分主要介绍一些针对特定开发环境的插件

Vscode-element-helper

使用element-ui库的可以安装这个插件,编写标签时自动提示element标签名称。

https://upload-images.jianshu.io/upload_images/2484592-2c9831f44f9834a7.gif?imageMogr2/auto-orient/strip|imageView2/2/w/992/format/webp

 Version Lens  工具包版本信息

在package.json中显示你下载安装的npm工具包的版本信息,同时会告诉你当前包的最新版本。

WakaTime 计算代码工作量

这是一款时间记录工具,它可以帮助你在vs code中记录有效的编程的时间。

并且将数据用折线图的形式展示出来,为你呈现一周内的工作趋势,曾经编写项目的时候最多一天编程将近12个小时,你的付出和努力wakatime都知道。

同时在他的官网中,也会显示用扇形图的形式显示你编写各个语言所占用的时间比例,以及你在各个项目中所用的时间占比,是一个非常好的数据报告,项目结束的时候你可以在它的Dashboard中清晰地看出自己的时间都是如何分配的。

Settings Sync VSCode设置同步到Gist(现已弃用)

有时候我们到了新公司或者换了新电脑需要配置新的开发环境,这时候一个一个下载插件,再重新配置vs code就非常麻烦而且你还不一定记得那么全面,通过这个插件我们可以将当前vs code中的配置上传到Gist,之后再通过Gist下载,就可以将所有配置同步到新环境中了。

点击左侧侧边栏Developer settings,进入开发者设置。

选择Personal access tokens,点击右侧Generate new token。

填写token名称,在下方勾选gist。

点击下方的Generate token按钮生成一个新的token。

将生成的新的token保存下来。

在vscode中安装Settings Sync插件,输入Ctrl+Shift+p输入Sync,选择更新/上传配置。

将github中生成的token输入,点击回车。

在控制台中自动生成一串id,之后便可以通过token和id进行配置同步。

输入Ctrl+Shift+p输入Sync,选择下载配置,输入token和id即可同步下载。

minapp

微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)

colorize

在设置下面直接显示颜色,更直观的知道你设置的是什么颜色,同时也支持Less、Sass的变量

Path Autocomplete

自动提示文件路径

javascript console utils

它的主要功能是快速的生成console.log(),再调试js的过程中难免要打印一些东西,所以快速生成就很爽

下载安装好就可以用了

使用方法:

先选中变量

然后按ctrl/cmd+shift+L

就会自动生成console.log

调试的时候可能会弄了好多的console.log出来

调试好了之后需要把这些console.log删除掉

这时按ctrl/cmd+shift+D

就可以删除所有的console.log

local history

修改代码之后想找回历史代码怎么办?

在使用Pycharm、IDEA时可以直接查看本地历史代码,然后轻松恢复之前某个版本。但是,VS Code默认是不支持local history的,所以,仅凭Ctrl+z撤销操作时不行的。何况,撤销操作是把前面步骤所有的操作都撤销了,其中有很多是我们不需要的。

但是,为VS Code配合上local history,所有问问题就迎刃而解了。

安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样,每当我们保存更改时,它都会备份一份历史文件,当我们需要恢复之前版本时,只需要点击一下对应的文件即可。此外,它还会在编辑框显示对比详情,能够让你对修改位置一目了然。

Better Comments

是不是觉得注释信息千篇一律?

Better Comments这款插件可以让VS Code注释信息更加人性化。

它可以根据告警、查询、TODO、高亮等标记对注释进行不同的展示。此外,还可以对注释掉的代码进行样式设置。

您想要的任何其他注释样式都可以在设置中指定

stylelint

CSS / SCSS / Less 语法检查

stylelint是一个 css 规范校验工具,也支持 less 等 css 预处理器。

1.安装扩展

2. 项目初始化

$ npm init -y

3. 安装依赖

yarn add stylelint stylelint-config-standard --dev

4. 添加.stylelintrc.js文件

在项目根目录添加.stylelintrc.js文件并加入如下内容

module.exports = {

extends:'stylelint-config-standard',

rules: {

// your rules

},

// 忽略其他文件,只校验样式相关的文件

ignoreFiles: [

'node_modules/**/*',

'public/**/*',

'dist/**/*',

'**/*.js',

'**/*.jsx',

'**/*.tsx',

'**/*.ts',

],

};

5. 添加index.css

新建index.css并加入以下内容

     可以发现,如果样式代码不符合规范,styleint会在代码中给出提示

Error Lens

Error Lens是一款把代码检查(错误、警告、语法问题)进行突出显示的一款插件。

经常与代码打交道的同学都应该清楚,大多数开发工具对于代码进行都是通过下划线的方式进行标识。但是,这样对于代码调试不够直接和友好。

Error Lens 通过使诊断更加突出,增强了语言的诊断功能,突出显示了由该语言生成的诊断所在的整行,并在代码行的位置以行方式在线打印了诊断消息。

它具有如下特性,

更明显地突出显示错误或警告信息

将诊断结果附加到包含诊断信息的任何行的末尾,这意味着你不必上下文切换到问题视图

状态栏显示打开文件的诊断次数(可以配置)

可以配置设置以控制 ErrorLens 显示增强诊断的方式

适用于任何编程语言

Git Graph:

git插件,这个插件也体现出vscode一站式解决问题的决心和能力,如下:

Trailing Spaces

高亮那些冗余的空格,可以快速删掉。

Git Blame

“谁写的这段代码?”

每隔一段时间,你都可能需要了解某段代码是谁写的。正好,Git Blame 就可以帮你。Git Blame 会告诉你最后修改这行代码的人是谁。最重要的是,你可以看到这处修改发生在哪次提交里。

这个信息很有用,特别是当你在某个产品功能分支上开发时尤其有用。当使用产品功能分支开发时,你通过点击以你分支名命名的标签,就可以跳到相应信息。

由于 Git Blame 会告诉你这行代码是在哪个提交和哪个分支上修改的,所以你就知道了哪个标签对应着这次修改。这将帮助你更好地理解这种修改背后的逻辑。

Prettify JSON 

格式化JSON,有些没有排版好的JSON免去自己手动排列好。一键格式化效率还是很不错的

Bookmarks  

 给文件某个位置打标签,用来快速跳转的..不知道这个功能到现在为何没内置!!

Live Saas Compiler

它能帮你实时把 SASS/SCSS 文件编译/转译成 CSS 文件,并且提供在线浏览器重载。

Log File Highlighter日志文件(.log后缀的文件)高亮

Laravel goto view跳转到相应的文件路径

Comment Translate

VSCode 注释翻译

Icon Fonts

这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

Visual Studio Intellicode

下载超过320万次的Visual Studio Intellicode是Visual Studio下载次数最多的插件之一。而且,在我看来,它是你能用到的最有用的插件之一。这个插件旨在帮助开发人员提供智能的代码完成建议而构建的,并且已预先构建了对多种编程语言的支持。

Visual Studio Intellicode使用机器学习技术来观察和查找众多开源GitHub项目中使用的模式,并在编码时提供建议。

change-case

通常我们对一个变量的命名可能是驼峰,可能是全大写,又或是下划线,这里可通过这个插件解决变量命名规范的问题选中变量配合组合键[Ctrl+Shift+p],输入对应格式即可。extension.changeCase.commands:列出所有“更改案例”命令,如果仅选择一个单词,则带有预览 

extension.changeCase.camel:更改大小写'camel':转换为字符串,并用下一个字母大写表示分隔符 

extension.changeCase.constant:更改大小写“常量”:转换为大写字母,下划线分隔字符串

 extension.changeCase.dot:更改大小写的“点”:转换为小写,句点分隔的字符串extension.changeCase.kebab:更改大小写“ kebab”:转换为小写字母,用破折号分隔的字符串(参数名的别名)

 extension.changeCase.lower:更改大小写为“小写”:转换为小写的字符串 

extension.changeCase.lowerFirst:更改大小写“ lowerFirst”:转换为首字母小写的字符串

 extension.changeCase.no:转换没有任何大小写的字符串(小写字母,空格分隔) 

extension.changeCase.param:更改大小写为'param':转换为小写字母,用破折号分隔的字符串 

extension.changeCase.pascal:更改大小写“ pascal”:转换为以与camelCase相同的方式表示的字符串,但首字母也大写 

extension.changeCase.path:更改大小写的“路径”:转换为小写,用斜杠分隔的字符串

 extension.changeCase.sentence:更改大小写的“句子”:转换为小写的空格分隔的字符串

 extension.changeCase.snake:更改大小写“ snake”:转换为小写字母,下划线分隔字符串 

extension.changeCase.swap:更改大小写“交换”:转换为每个大小写相反的字符串 

extension.changeCase.title:更改大小写“标题”:转换为以空格分隔的字符串,每个单词的第一个字符均大写 

extension.changeCase.upper:更改大小写为大写:转换为大写字符串 

extension.changeCase.upperFirst:更改大小写为“ upperFirst”:转换为首字母大写的字符串

EditorConfig for VS Code

代码风格统一

配置参考:https://blog.csdn.net/qq_24147051/article/details/85244267

Git History Diff :寻找每一个git分支上面提交过的节点,并可以对比差异性。

Angular Extension pack: 集成了很多提升Angular开发效率的插件

解决Vscode提示code安装似乎损坏

参考:https://blog.csdn.net/liuarmyliu/article/details/107370535

vs code显示扩展宿主意外终止该怎么办?

     卸载:Live Sass Compiler,Live Server

CSS Navigation:快速跳转到CSS的类定义

css-auto-prefix:写CSS时不再为浏览器前缀发愁 

Git 集成插件

     GitHub Pull requests

在Visual Studio Code中查看和管理GitHub拉取请求和问题

guides

显示代码对齐辅助线,很好用

JavaScript Booster

这款神器可以在我们代码写的不规范或者有待调整的地方,在光标聚焦后,会有一个小灯泡。会提示对应的不合理原因和改进方案。极大的提高了我们的代码优雅度,强烈推荐

让您的生活更轻松,使用代码操作为您执行重复性任务!他们可以提供很多帮助,只需跟随灯泡!

当在JavaScript(或TypeScript / Flow)中编辑代码时,此VS Code扩展提供了各种代码操作(快速修复)。只需注意左侧的灯泡,然后按一下它即可了解如何在光标下转换代码。

Cocos Creator JS

     JavaScript 代码支持函数跳转

Cocos Creator 支持 JavaScript 和 TypeScript 两种语言,如果你是用 VS Code 来开发 Cocos Creator 的 js 项目,那你的编程体验应该不是很好,因为 Cocos Creator 的组件脚本是一套自定义的结构,

下面是预览效果:

js代码支持函数跳转

    js代码提示

    模块跳转

path-alias 一个可以解决路径别名提示,跳转的vscode插件禁用卸载

参考:https://juejin.cn/post/6844903954376032269

Tabnine

智能提示代码,可以预测你将要写的代码进行提示

Template String Converter

      在字符串中输入$触发,将字符串转换为模板字符串

Parameter Hints

          提示函数的参数类型及消息

vue-component

       输入组件名称自动导入找到的组件,自动导入路径和组件

       选中后自动输入组件名(包含必填属性)、import语句、components属性

CSS Initial Value

      显示每个CSS属性的初始值,当光标停留在css属性时

A-super-translate

     翻译识别代码中注释部分,不干扰阅读。支持不同语言,单行、多行注释、

     支持用户字符串与变量翻译,支持驼峰拆分

    使用方法:选中行,Ctrl+Shift+p 输入 翻译

    键入 ctrl+`再按下 ctrl+1 为翻译直接替换选中区域

vue-format(4个空格,格式化,好用)

Todo Tree 纪录代码位置,快速定位代码

Prettier ESLint

Prettier ESLint 按照 ESLint 的规范美化代码,搭配使用.

Csscomb

css 、less、sass 的代码格式化。

DotENV

支持.env文件语法,高亮显示

Volar

与vetur相同,volar是一个针对vue的vscode插件,支持.vue文件的语法支持、高亮显示、格式校验、错误检测等,不过与vetur不同的是,volar提供了更为强大的功能

编辑器快捷分割
class追溯
lang语法提示

Nested Comments

嵌套注释一直是个问题。

因为被嵌套的注释会和第一个注释开头组合成有效的注释,而后面的部分将会被忽略。

这个插件可以帮助我们将被嵌套的注释进行字符转换,在我们解除外层注释时,再还原被嵌套的注释。

下载地址:marketplace.visualstudio.com/items?itemN…

Hungry Delete

  这个插件帮助我们一键删除多个空行。

  按住 Option+Delete 就可以删除多个空行。

vscode-styled-components

功能:在JS文件中写样式时,有智能提示

Echars 智能提示插件

提示各种Echar中Option 的属性,挺强大的

Auto import 自动导入包

Auto import 是一个自动导入包扩展。如果目前手头的项目是基于不同组件的,那么你需要做的就是给每个组件命名,剩下的事交给 Auto import 就好。

Sort Typescript imports

    import自动排序

导入太多的库了,眼花撩顺,这款插件让他们有序排列, 强迫症患者的福星。我记得eslint好像也有类似的规则

Code Time

Code Time 可以计算我们使用 Visual Studio Code 的时间,提供了多种数据指标。

css-class-intellisense (这个适用于先在css写了样式,在html中写入样式时提示)

HTML to CSS autocompletion (这个适用于先在html写了样式,在css中写入样式时提示)

Can I Use HTML5、CSS3、SVG的浏览器兼容性检查

Dash    集成Dash

Less IntelliSense    less变量与混合提示

PostCss Sorting    css排序

gitignore    .gitignore文件语法

Error Gutters

File Peek  根据路径字符串,快速定位到文件

Find-Jump 快速跳转到指定单词位置

VS Code Counter

统计代码总行数、注释行数、空白行数,以及使用的语言。

any-rule

可以在vscode里快捷使用正则表达式,不需要借助度娘了!

方式1:

F1(mac下fn+F1)打开正则列表. -- 有的需要 配合 fn+f1使用

输入关键词搜索, 比如"手机".

方式2:

右键选择"🦕正则大全".

方式3:

在代码任意位置输入"@zz".

Black Box

Blackbox 是一款强大的 VSCode 扩展,可以帮助开发人员更快、更准确地编写代码。它包含四个主要功能:代码自动补全、仓库搜索、代码搜索和 Jupyter Lab & Notebooks。通过代码自动补全,开发人员可以获得超过20种编程语言的代码建议,包括 Python、JavaScript、TypeScript、Go 和 Ruby,只需按 Enter 键即可。为了获得更好的准确性,建议在您要构建的函数上添加良好的注释。Blackbox 仓库搜索允许开发人员搜索不同语言的超过1亿个仓库文件,包括 Python、JavaScript、TypeScript、Java 等。这个功能直接集成在 VSCode 中,因此开发人员不需要离开他们的 IDE 在线搜索特定的仓库。Blackbox 代码搜索帮助开发人员找到最佳的代码片段,在构建出色的产品时使用。只需几个简单的步骤,开发人员就可以获取超过20种编程语言的代码片段,包括 Python、Java、C 和 C++、C#、JavaScript、SQL、PHP、Go、TypeScript、Kotlin、MATLAB、R、Swift、Rust、Ruby、Dart 和 Scala。最后,Blackbox 还提供了对 Jupyter Lab & Notebooks 的支持,允许开发人员和数据科学家在构建出色的产品时找到最佳的代码片段。通过 Blackbox Chrome 扩展,开发人员可以在行首使用注释符号并编写问题,以立即获得代码建议。总的来说,Blackbox 是任何想要像想法一样快速编写代码的开发人员必备的扩展。 

根据需求,大家安装对应插件即可(安装太多插件,VSCode会很卡)

当然电脑配置足够强大,当我没说🤔

修改终端颜色:

在网站上找到配色

https://glitchbone.github.io/vscode-base16-term/#/default-dark

替代你喜欢的配色,最后查看终端

安装angular 需要的插件:

Angular 7 Snippets:Angular语法填充(标签)

Angular Files:生成Angular的文件模板(Component、Module、Pipe等等)

Angular Follow Selector:文件跳转(Component跳转到html、scss文件)

Angular Language Service:引用填充和跳转到定义(html中进行引用补全)

使用vscode自动生成vue代码模板

参考:https://www.cnblogs.com/binky/p/12672242.html

vscode右键打开文件

把这几个勾上就好

vscode 总是报正在运行“Prettier - Code formatter”格式化程序(配置)。等,卸载一下vscode,重新安装一下就好了

彻底卸载vscode:

参考:https://www.cnblogs.com/muou2125/p/10388440.html

VSCode对于Three.js的补全提示,vscodethree.js

1.首先,你要安装Node.js

2.在vscode的 查看-> 集成终端中 输入

npm install --save @types/three

3.完成后,在my.js 同级建立文件jsconfig.json空文件

4打开my.js 就有自动补全了。

一些快捷键

参考:https://blog.csdn.net/x1037490413/article/details/86758644

修改代码之后想找回历史代码怎么办?

在使用Pycharm、IDEA时可以直接查看本地历史代码,然后轻松恢复之前某个版本。但是,VS Code默认是不支持local history的,所以,仅凭Ctrl+z撤销操作时不行的。何况,撤销操作是把前面步骤所有的操作都撤销了,其中有很多是我们不需要的。

但是,为VS Code配合上local history,所有问问题就迎刃而解了。

安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样,每当我们保存更改时,它都会备份一份历史文件,当我们需要恢复之前版本时,只需要点击一下对应的文件即可。此外,它还会在编辑框显示对比详情,能够让你对修改位置一目了然。

VScode如何快速生成Html标签(Emmet的简单使用)

参考:https://blog.csdn.net/Cloud1209/article/details/104183069

最近vscode 更新了之后偶然发现,折叠地代码之后,结束的大括号没有显示出来,而是只显示省略号,感觉很不方便,如下图:

参考:https://www.cnblogs.com/fxwoniu/p/13899402.html

彻底卸载 VSCode

win + r 打开运行    回车

地址栏输入 %userprofile% 回车

删除 .vscode 文件夹

win+R输入%appdata%

删除 Code 和 Visual Studio Code 文件夹

国内下载vscode速度慢解决

找到相应的.exe后,谷歌按ctrl+j,打开下载的文件, 复制 VScode 下载链接;然后在 新的窗口 粘贴链接。将 链接中 http://az764295.vo.msecnd.net 替换为 http://vscode.cdn.azure.cn 就可以解决了,

参考:https://blog.csdn.net/t1506376703/article/details/100129923?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&utm_relevant_index=1

setting sync 下载不了,出现Sync: 错误信息已打印在控制台 (帮助 > 切换开发人员工具)。

一般这种情况就是网络问题,我试过很多次,同步是没有问题的

VScode登录不了Leetcode进行刷题秒杀解决方案

参考:https://blog.csdn.net/Protinx/article/details/121025338

在VsCode中使用LeetCode插件

参考:https://blog.csdn.net/u011895157/article/details/125042359

VSCode下使用Leetcode不能提交代码怎么办!?

参考:https://blog.csdn.net/uzwuzw/article/details/109384848

简单一步到位同步你的 VSCode 全部配置

参考:https://blog.csdn.net/weixin_43131046/article/details/123118022

vscode同步扩展设置(Settings Sync)

参考:https://segmentfault.com/a/1190000021745980

settings Sync 上传失败

参考:https://www.jianshu.com/p/f6a68d815815

vscode处理代码合并冲突

参考:https://blog.csdn.net/weixin_47981445/article/details/124328280

vs code 出现html js css 注释不正常

参考:https://blog.csdn.net/sunny327/article/details/89335911

那些你应该考虑卸载的 VSCode 扩展

参考:https://blog.csdn.net/weixin_32210881/article/details/112145398

vscode设置字体

参考:https://blog.csdn.net/web15185420056/article/details/123266347

1、字体设置( JetBrains Mono )

管理 -> 设置

字体大小: 20

字体系列:JetBrains Mono

注:

    在 VSCode 中 “控制字体系列” 添加字体名称 (优先级:从左至右)

    同时还要在对应的电脑操作系统中安装字体才能生效

推荐:

    在 VSCode 中推荐使用 JetBrains Mono 编程专用字体

    JetBrains 公司最新出了一个字体 JetBrains Mono,据称是专为改善看代码体验而生

2、下载字体

        JetBrains Mono 官方下载地址 :https://www.jetbrains.com/lp/mono/

        点击 Download font 下载

3、在电脑中安装字体

安装

    下载后解压,进到ttf 文件夹下,会有一堆文件,全选后安装

      所有的字体都叫 JetBrains Mono,全选安装的目的是为了响应各种特殊字体(比如斜体、意大利体、粗体、如果不需要这些花里胡哨的只需安装 Regular.ttf)

4、在 VSCode 中启用查看字体


如需要 Consolas 字体:如下

windows 下 VScode 使用 Consolas 下载地址:https://www.fonts.net.cn/font-33390313417.html

VSCode 安装教程(超详细)

参考:https://blog.csdn.net/weixin_44950987/article/details/128129613

关于VScode每次保存/修改文件后都会自动生成一个打包文件dist的问题

参考:https://blog.csdn.net/weixin_45249263/article/details/123232030

scss注释不了,卸载

VsCode 中的Vetur报错

大概意思是找不到Vetur can't find tsconfig.json or jsconfig.json in

打钩即可
卸载Rainbow Brackets即可
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容