VS Code 快速使用指南

时间 2019-11-08

标签 code 快速使用指南繁體版

原文原文链接

前言

最近团队为了保持较好的前端开发规范，鼓励你们使用同一款编辑器，咱们选择了vscode, 由于团队大部分人都在用，并且用起来很爽。为了让没有用vscode的同窗快速了解它，我收集了网上一些资料加上本身的一点平常使用经验写了这篇介绍文章。php

vscode 使用介绍

Visual Studio Code （简称 VS Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器。html

咱们将从一下几个部分来认识vscode前端

基本配置
集成
版本控制
代码调试

1 基本配置

直接官网下载 code.visualstudio.com/
首选项，以下图，经过首选项，咱们能够设置vscode 的基本配置以及快捷键、用户自定义主题等。

以下图，基本配置其实是一个json文件，里面有自带的默认配置，除此以外，咱们每安装一个插件，都会生成一个新的json,咱们经过在右侧输入自定义的json配置，就能够覆盖默认的配置项vue

快捷键，点击首选项下的快捷键能够查看和修改全部的快捷键配置

...

2 集成

vscode 集成了大量第三方插件，经过第三方插件能够大大提升咱们的开发效率node

经常使用插件推荐python

vuetr vue 格式化插件
vscode-fileheader 自动保存文件建立人及修改人
Auto Close Tag 自动关闭html标签
Dark Dark - 猫哥基于默认 Dark 主题修改的加强主题
EditorConfig for VS Code - 用于支持 .editorconfig 配置规范
ESLint - 用于支持 JavaScript 实时语法校验
Git History - 可查看文件的 git log 并进行对比
HTML Snippets - 能修复默认 HTML Emmet 的一些问题
Material Icon Theme - 左侧文件导航栏 Icon 主题
Settings Syncs - 用于同步 VS Code 的配置到我的 gist 仓库

就列这么多你们能够本身摸索...chrome

3 版本控制

vscode 集成了git 切换至 Git 面板，咱们能够直接经过图形操做界面执行git命令，如：点击左侧被修改的文件，便可进行版本对比。同时 npm

对于习惯命令操做得当同窗，也能够直接在终端中执行git 命令或者ctrl + P 直接快速选择命令

4 代码调试

Visual Studio Code 的关键特性之一就是它对调试的支持。在调试中如同chrome 浏览器的debug 同样，vscode 默认支持nodeJs 代码调试，咱们能够安装第三方插件来调试其余语言的代码。对于前端来讲，可以很是方便进行nodeJS 代码调试json

咱们能够安装插件支持如python 等语言的调试

更多信息参考官网code.visualstudio.com/docs/editor…

调试配置文件 launch.json

若是咱们默认经过vscode 来调试代码，会生成一个launch.json 配置文件，详细细节能够查看官方文档code.visualstudio.com/docs/editor… 咱们这里只说说咱们通常会经常使用的地方。

lunch.json 配置项

必选字段

type：调试器类型。这里是 node(内置的调试器)，若是装了 Go 和 PHP 的扩展后对应的 type 分别为 go 和 php
request：请求的类型，目前只支持 launch 和 attach。launch 就是以 debug 模式启动调试，attach 就是附加到已经启动的进程开启 debug 模式并调试，跟上一篇提到的用 node -e "process._debugProcess(PID)" 做用同样
name：下拉菜单显示的名字
复制代码

可选字段

program：可执行文件或者调试器要运行的文件 (launch)
args：要传递给调试程序的参数 (launch)
env：环境变量 (launch)
cwd：当前执行目录 (launch)
address：ip 地址 (launch & attach)
port：端口号 (launch & attach)
skipFiles：想要忽略的文件，数组类型 (launch & attach)
processId：进程 PID (attach)

复制代码

同时目录变量有

${workspaceRoot}：当前打开工程的路径
${file}：当前打开文件的路径
${fileBasename}：当前打开文件的名字，包含后缀名
${fileDirname}：当前打开文件所在的文件夹的路径
${fileExtname}：当前打开文件的后缀名
${cwd}：当前执行目录
复制代码

一般一个默认的launch.json 默认配置以下

{
    "version": "0.2.1",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

复制代码

这个配置会直接运行index.js 咱们项目目录下的index.js 文件。咱们能够根据上面的配置信息自动的定义咱们启动运行的文件。

调试技巧

条件断点

1 表达式：当表达式计算结果为 true 时中断 ,如这里能够判断 ctx.body.aaa = '1' ,当为知足这个条件时，才会断点

2 命中次数一样当表达式计算结果为 true进入断点，支持运算符 <, <=, ==, >, >=, %。

skipFiles 在调试时文件要跳过的一组 glob 模式

咱们在单步调试时通常会进入到node_modules目录，可是咱们通常每每只想调试咱们的项目代码，因此这个时候能够经过配置 skipFiles 来进行过滤详细官方文档参考code.visualstudio.com/docs/nodejs…

"skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "${workspaceFolder}/lib/**/*.js"
  ]
  
  "skipFiles": [
     "<node_internals>/**/*.js"
   ]

复制代码

自动重启

经过添加配置能够实现修改代码保存后会自动重启调试，须要结合 nodemon 一块儿使用。首先安装nodemon

npm i nodemon -g

{
    "version": "0.2.1",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "debug-app",
            "runtimeExecutable": "nodemon",  要使用的运行时。一个绝对路径或路径上可用的运行时名称。若是省略，则假定为“节点”。
            "program": "${workspaceRoot}/app.js",
            "restart": true,
            "console": "integratedTerminal",
            "skipFiles": [
                "${workspaceRoot}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        }
    ]
}
复制代码

参数说明

runtimeExecutable：用什么命令执行 app.js，这里设置为 nodemon，默认是 node
restart：设置为 true，修改代码保存后会自动重启调试
console：当点击中止按钮或者修改代码保存后自动重启调试，而 nodemon 是仍然在运行的，经过设置为 console 为 integratedTerminal 能够解决这个问题。此时 VS Code 终端将会打印 nodemon 的 log，能够在终端右侧下拉菜单选择返回第一个终端，而后运行 curl localhost:3000 调试

总结

以上差很少就是咱们可以经常使用到的vscode 的地方，我我的以为在使用过程当中好的地方主要是两点即一、第三方插件的使用能够极大地丰富咱们的使用功能二、调试功能用起来真的很爽。 vscode是一个十分强大的IDE工具以上列出来的只是冰山一角之一角。有兴趣的能够直接看文档code.visualstudio.com/docs，能够发掘出更多有意思的东西。