2015年,微软发布了Visual Studio Code

一、编辑器配置

下面介绍两种方案。

1、设置文件

文件 -> 首选项 -> 设置vscode的字体大小,缩进。

{
  "editor.fontSize": 16,
  "editor.tabSize": 4,
  "editor.detectIndentation": false
}

2、新建.editorconfig文件

root = true

[*]
charset = utf-8
indent_style = tab //使用制表符
indent_size = 4 //4个空格为一个缩进
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

二、快捷键

、在当前窗口新建标签:command + N;
、关闭当前标签:command + W;
、打开命令板:command + shift + P;
、自动补全:Tab;
、撤销:command + Z;
、向左缩进:command + [;
、向右缩进:command + ];

、插入行后:command + Enter;
、插入行前:command + shift + Enter;
、上下移动当前行:option + ↑/↓;
、上下复制当前行:shift + option + ↑/↓;

、注释整行:command + / ;
、取消注释:连着按两次注释行的命令,即可取消注释;
、注释已选择内容:command + K + command + U ;
、删除整行:command + X ;
、删除当前行:command + shift + K ;

、查找关键字:command + F ;
、替换当前关键字:command + shift + H ;
、替换所有匹配的关键字:command + option + Enter ;
、查找并替换关键字:command + option + F ;

、选词(按住-继续选择下个相同的字符串):command + D ;
、左右逐词选择:command + shift + ←/→ ;
、向上选中多行:shift+command + option + ↑ ;
、向下选中多行:shift+command + option + ↓ ;
、向左选中文本:shift+command + option + ← ;
、向右选中文本:shift+command + option + → ;
、选择整行(按住-继续选择下行):command + i;
、矩形垂直选区:左手按键option + shift,右手在触摸板上选区;
、选中当前关键字出现的所有位置:command + shift + L ;

、在上面插入光标:command + option + ↑ ;
、在下面插入光标:command + option + ↓ ;
、跳到当前行的头部:Fn + ← ;
、跳到当前行的尾部:Fn + → ;
、跳到文档开始处:command + ↑ ;
、跳到文档结束处:command + ↓ ;
、跳转到某行:control + G;

、新建html文件:! + tab 或 html: + tab ;
、格式化代码:、预览markdown:command + shift + v ;

三、优点

比sublime开源,比atom更快,比webstorm更轻。用sublime适合写python,用vscode适合写typescript,内置js调试器,无插件化的代码diff,git,markdown。

四、插件

1、Prettier
格式化代码。
2、css peek
追踪css定义的地方。鼠标右键html的某个classname,转到css定义的地方。我自己尝试失败,没有找到定义的地方。
3、color info
预览颜色信息。
4、cssrem
把px转换成rem。
5、can i use
显示兼容性。光标放在某个属性上,command + shift +p,运行“Can I Use”,可以在底部状态栏看浏览器支持的情况。也可以把鼠标悬浮在某个属性上,出现下拉框显示浏览器支持的情况。
6、Path Intellisense
自动补全文件路径名。
7、Bracket Pair Colorizer
对括号着色。
8、Document This
在js,ts中自动生成注释。
9、eslint
静态代码检查。
10、lodash
提示js代码段。
11、Npm Intellisense
提示安装包。
12、vetur
vue语法高亮。
13、VueHelper
vue2的代码段。
14、vue peek
追踪单文件组件定义的地方。
15、Generator-vue-components
生成vue组件。
16、Reactjs snippets
智能提示。
17、React Component
创建组件。
18、generate-react-component
创建组件。
19、React/Redux/react-router Snippets
很有用的react生态。
20、React Native Tools
调试代码,运行react-native命令。
21、React-Native/React/Redux snippets for es6/es7
提示react的代码段。
22、code runner
运行选中的代码。
23、Quokka
调试js,ts,预览计算结果。
24、Debugger for Chrome
在vscode中,调试运行在chrome里面的js代码。
25、Open in Browser
在浏览器中打开。
26、git blame
查看谁修改了代码。
27、git history
查看提交历史。
五、某些问题
1、git找不到
报错 未找到Git。请安装Git,或在"git.path" 设置中配置。windows系统中,可以在文件 -> 首选项 -> 设置文件中配置。
{
  "git.path": "D:/software/Git/Git/bin/git.exe",
}

2、太占cpu

尤其是安装了大量的插件后,cpu使用率100%,电脑容易卡机。要么卸载一些插件,要么使用更高的电脑配置。

3、保存后变成双引号

// 文件 -> 首选项 -> 设置

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact"
    ]
}

六、断点调试代码

1、配置文件解读
2、服务端简单文件
3、服务端复杂文件
4、客户端简单文件
5、客户端复杂文件

vscode那些事儿的更多相关文章

  1. vscode中如何加eslint检查工具

    代码的质量对开发人员个人的成长以及公司的发展至关重要,所以如何使用把控代码的质量是大家经常思考的问题.除了代码审核之外,代码检查工具成了把控代码质量的第一道门槛,非常好用,可以建立一些团队约定的代码风 ...

  2. HTML&CSS:构建网站不能不说的那些事儿

    很高兴你能看到这个专栏!俗话说得好,相逢即是缘分,没准你和我在上一世也曾有过五百次的回眸,才得此一面.说的有点恶心了,咱还是书归正传,说说这个专栏吧. 这个专栏主要讲的是 HTML 和 CSS 的页面 ...

  3. 说说Makefile那些事儿

    说说Makefile那些事儿 |扬说|透过现象看本质 工作至今,一直对Makefile半知半解.突然某天幡然醒悟,觉得此举极为不妥,只得洗心革面从头学来,以前许多不明觉厉之处顿时茅塞顿开,想想好记性不 ...

  4. VSCode添加Sciter脚本Tiscript高亮支持

    Sciter中的Tiscript脚本不是标准的Javascript,是对Javascript的扩展.所以在常用的编辑器和IDE上对于高亮的支持很不好. 不过在Sciter论坛中找到了在VSCode上的 ...

  5. 总结iOS开发中的断点续传那些事儿

    前言 断点续传概述 断点续传就是从文件赏赐中断的地方重新开始下载或者上传数据,而不是从头文件开始.当下载大文件的时候,如果没有实现断点续传功能,那么每次出现异常或者用户主动的暂停,都会从头下载,这样很 ...

  6. 在linux系统中安装VSCode(Visual Studio Code)

    在linux系统中安装VSCode(Visual Studio Code) 1.从官网下载压缩包(话说下载下来解压就直接可以运行了咧,都不需要make) 访问Visual Studio Code官网  ...

  7. setTimeout那些事儿

    一.setTimeout那些事儿之单线程 一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没——就是我们 ...

  8. Javascript中关于cookie的那些事儿

    Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什 ...

  9. 2016年最新mac下vscode配置golang开发环境支持debug

    网上目前还找不到完整的mac下golang环境配置支持,本人配置成功,现在整理分享出来. mac最好装下xcode,好像有依赖关系安装Homebrew打开终端窗口, 粘贴脚本执行/usr/bin/ru ...

随机推荐

  1. requireJs require.config公共配置

    //场景:让require.config配置文件成一个公共文件,每个页面引用这个公共配置 //方式一样例: require.config({ baseUrl: (function () { var p ...

  2. java URI

    URI是对URL的抽象,不仅包括统一资源定位符,还包括统一资源名,在java中URI用java.net.URI类表示,这个类与java.net.URL类的区别表现在: URI类完全有关于资源的标识和U ...

  3. Nginx详解二十五:Nginx架构篇之Nginx常见的问题

    Nginx常见的问题 1.相同server_name多个虚拟主机优先级访问,是按读取文件的优先级来排序 在/opt/app/下准备3个code文件夹,下面放入3个html文件,里面的内容分别是code ...

  4. centos7.4/rehat7.0系统安装

    以下是安装过程:(图解),以下是rehat为例 这里可以改为centos的镜像 之后就可以用了,记得做快照!!! 拓展:分离使用 效果:

  5. B: Ocean的游戏(前缀和)

    B: Ocean的游戏 Time Limit: 1 s      Memory Limit: 128 MB Submit My Status Problem Description 给定一个字符串s, ...

  6. caffe入门-人脸检测1

    最近刚入门caffe,跟着视频做了一个简单人脸检测.包括人脸二分类模型+方框框出人脸. 人脸二分类模型 1. 收集数据 我用的是lfw数据集,总共有13233张人脸图片.非人脸数据有两种选择.1. 用 ...

  7. [转] Javascript模块化编程(一):模块的写法

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  8. js数字货币格式互转

    //将1,234,567.00转换为1234567.00 function moneyToNumValue(val) { var num = val.trim(); var ss = num.toSt ...

  9. luogu 1471

    题意: 蒟蒻HansBug在一本数学书里面发现了一个神奇的数列,包含N个实数.他想算算这个数列的平均数和方差. 操作1:1 x y k ,表示将第x到第y项每项加上k,k为一实数. 操作2:2 x y ...

  10. H.265:网络视频的高清时代

    去年八月,爱立信公司推出了首款H.265编解码器,而在仅仅六个月之后,国际电联(ITU)就正式批准通过了HEVC/H.265标准,标准全称为高效视频编码(High Efficiency Video C ...