VSCode 简单入门指南

发布:elantion 日期:2018-07-11 阅读:1926 评论:0

之前一直使用Webstorm,感觉也没什么问题,直到碰到大型的项目,就算我i7+8G的电脑也承受不了,卡得不耐烦,只好另寻IDE,于是就用上了VSCode(为啥不用Atom,缘份的问题)。

一、下载安装

到官网:https://code.visualstudio.com/ 下载安装就行。

二、快捷键

很多功能只能用快捷键调出,所以必须要学会基本的几个快捷键(除了ctrl+c, ctrl+v)。

  1. ctrl+shift+p : 打开vs命令
  2. ctrl+p : 最近打开的文件
  3. ctrl+shift+~ : 新建控制台

三、修改语言

习惯了英文,顺便强迫自已学英语。

ctrl+shift+p -> configure language -> 把"zh-cn"改成"en"即可

更详细说明:https://code.visualstudio.com/docs/getstarted/locales

四、关闭auto-save

虽然自动保存功能你让你的编辑不会因各种原因丢失,但webpack的watch模式下,会因为过于频繁的保存导致多次无用的编译,非常浪费系统资源,因此我们选择关闭它。

ctrl+shift+p -> preference: open user setting -> 在右边添加/修改:"files.autoSave": "onWindowChange"

设置之后,当窗口失去焦点的时候才会去保存~
更详细说明:https://code.visualstudio.com/docs/editor/codebasics

五、自定义eslint

虽然默认的代码查错功能一般是够用的,但通常很多人都有代码规范的要求,所以自定义一个eslint是个很好的习惯。

1. 全局或项目内安装eslin: npm i eslint -g
2. shift+ctrl+p -> Eslint: create '.eslintrc.json' file
3. shift+ctrl+p -> Eslint: enable eslint

各人的风格不一样,按自已喜欢配置就行,但遇到asyn/await,import之类的错误,可以参考下面的parserOptions字段(.eslintrc.json):

{
  "parserOptions": {
    "ecmaVersion": 8,
    "sourceType": "module"
  },
  "env": {
    "node": true,
    "es6": true,
    "browser": true,
    "amd": true
  }
    "rules": {
        ...
    }
}