VSCode安装与简单使用

简介

Visual Studio Code (简称 VSCode / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……

Part one

下载

请根据自己的实际情况下载：

下载地址：
https://code.visualstudio.com/Download

下面以Window10(专业版 64)为例。下载成功之后的文件截图：

Part two

安装

1.双击.exe文件，点击‘ 运行 ’按钮

2.点击接受协议，然后点击 ‘ 下一步 ’

3. 选择安装位置，点击‘ 下一步 ’

4. 根据个人习惯，决定是否将程序添加到菜单栏，执行下一步
ps: 个人不喜欢创建开始菜单文件夹，所以将蓝色框部分勾选。

5.选择快捷方式，点击‘ 下一步 ’

6. 安装

7. 安装过程及结果

Part three

简单配置

首次启动

设置语言支持

快捷键：ctrl + shift + p

点击使用：

选择期望使用的语言包

语言包安装成功之后，需要重启VSCode

重启成功之后，界面信息：

设置代码格式化插件

ps: 以PHP为例。

打开php文件，然后使用快捷键 alt + shiift + f。会有如下提示

根据喜好，选择安装格式化程序

格式化之后的代码

其他语言的格式化操作，大家可以自己去尝试，流程基本相同。

使用文档

在’ 帮助 '–> ’ 文档 ’ 即可访问使用说明。
地址：
https://code.visualstudio.com/docs#vscode

Part four

使用

PHP项目为例：

在此之前，我们需要配置好php server，我本地用的是WampServer：（已有php server的请忽略该步骤）
php server WampServer
默认项目的工作目录是：你自己的wamp安装目录/wamp/www。

如需修改默认工作目录，可通过修改：你自己的wamp安装目录/wamp/bin\apache\apache x.x.x\conf\httpd.conf 文件内容来指定你自己的工作空间

设置好php server之后，回到VSCode：
点击创建创建launch.json文件

将以下内容，配置launch.json文件中，ctrl + s 保存。

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    // ${workspaceRoot} 当前打开的文件夹的绝对路径+文件夹的名字
    // ${workspaceRootFolderName}   当前打开的文件夹的名字
    // ${file} 当前打开正在编辑的文件名，包括绝对路径，文件名，文件后缀名
    // ${fileBasename}  当前打开的文件名+后缀名，不包括路径
    // ${fileBasenameNoExtension} 当前打开的文件的文件名，不包括路径和后缀名
    // ${fileDirname} 当前打开的文件所在的绝对路径，不包括文件名
    // ${fileExtname} 当前打开的文件的后缀名
    // ${cwd} the task runner's current working directory on startup
    // ${lineNumber}  当前打开的文件，光标所在的行数
    // ${relativeFile} 从当前打开的文件夹到当前打开的文件的路径 
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost/${workspaceRootFolderName}",
            "webRoot": "${workspaceRoot}"
        }
    ] }

配置完成之后的界面

最后运行，看下结果

资料来源

vscode文档:
https://code.visualstudio.com/docs#vscode
wamp server:
https://www.wampserver.com/
/
关于Git的配置，比较简单，有需要的请移步自行百度这里（个人建议：还是使用手敲git命令的方式来处理版本控制比较有助于加深自己对 git 的理解）
/
关于快捷键，大家可以在 “文件”–> “首选项” --> "键盘快捷方式"里面搜索和查看自己需要的内容。
/
感谢阅读，祝工作顺利！