Visual Studio Code 不完全使用指南

摘要:
简介Visual Studio代码是基于Electron开发的轻量级编辑器。它专注于web开发。支持的语言包括:JavaScript C#JSONHTMLMarkdownTypeScriptCSS、Sass、LessDockerFileSwiftGroovy,这些语言在不断增加…快速导航VSCode提供了一个类似Sublime的多功能输入框。Command+P可以在不使用前缀字符的情况下调用,这可以在项目中使用
 

介绍


Visual Studio Code 是“巨硬”基于 Electron 开发的一款轻量级编辑器,主打 web 开发,支持的语言包括:

  • JavaScript
  • C#
  • JSON
  • HTML
  • Markdown
  • TypeScript
  • CSS, Sass, Less
  • DockerFile
  • Swift
  • Groovy
  • 不断增加中…

快速导航


VS Code 提供了类似于 Sublime 的多功能输入框,Command + P 即可调用出

help

不使用前缀字符,可以进行工程内的文件搜索;输入前缀字符 ? 可以查看所有命令列表(全局命令 + 编辑器命令),其中 > 前缀的使用最为频繁,通过它我们可以找到所有的命令,excited!

编辑功能


  • 多光标选取 Alt + 鼠标单击
  • 逐步选中其它相同的symbol Command + D
  • 全选相同symbol Command + F12
  • 代码格式化 Shift + Alt + F
  • 重构(重命名)Symbol F2
  • 查找所有引用了选中symbol的代码 Shift + F12
  • find-ref

  • 跳转到symbol的定义处 F12

  • 瞥见下symbol的定义出(在该symbol下方展开面板,显示定义处代码,非常有用)Alt + F12
  • peek-definition
  • 跳转到光标上一次(下一次)位置(误操作的回退方案,非常有用) Command + Left / Command + Right

语法提示


VS Code 的语法提示之强大令人发指,对于支持的语言有着很好的支持,同时对于函数方法也有参数的提示
hint

对于业界知名框架与库,也可以通过强大的 *.d.ts 文件来支持语法提示、参数提示,如我在项目中使用了 angular,键入 angular 命名空间,1s后出现小灯泡,然后点击它,选中”download…”后编辑器就开始后台下载了,成功后会有提示
angular-hint

jQuery, Backbone, Underscore, Lodash, Node.js, Express, Restify, Async 等等知名开源框架跟库的提示都可以直接通过 tsd 来管理,非常方便

无论通过小灯泡点击安装的还是通过tsd安装的ts文件,都会被放置在工程的根路径下的typings文件夹中,方便查看已有的提示插件

开启ES6语法支持


VS Code 默认支持 ES5 的语法,你的代码如果过用到了ES6的特性,又不想被内建的lint工具提示语法错误的话,你需要手动开启。在项目Proj根目录下新建jsoconfig.js文件,添加如下代码:

    {
        "compilerOptions": {
            "target": "ES6"
        }
    }

保存该文件 –> 重启编辑器,ES6 语法在该项目就已支持,内建lint工具也不会再提示错误了

调试Node.js


在本地安装 Mono 并将其加入环境变量中后,可以调试 Node.js 程序,调试操作类似于 WebStorm,先要进行debug的配置工作,通过切换到 Debug 面板,点击绿色启动按钮,这时编辑器会在工程根文件夹下新加 .setting 文件夹,Node.js的启动/调试配置文件、Task的配置文件都会放置在此。

这里Node.js配置的文件名为 launch.json

    {
        "version": "0.1.0",
        // List of configurations. Add new configurations or edit existing ones.
        // ONLY "node" and "mono" are supported, change "type" to switch.
        "configurations": [
            {
                // Name of configuration; appears in the launch configuration drop down menu.
                "name": "Launch env",
                // Type of configuration. Possible values: "node", "mono".
                "type": "node",
                // Workspace relative or absolute path to the program.
                "program": "env",
                // Automatically stop program after launch.
                "stopOnEntry": false,
                // Command line arguments passed to the program.
                "args": [],
                // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
                "cwd": ".",
                // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
                "runtimeExecutable": null,
                // Optional arguments passed to the runtime executable.
                "runtimeArgs": ["--nolazy", "--harmony"],
                // Environment variables passed to the program.
                "env": { },
                // Use JavaScript source maps (if they exist).
                "sourceMaps": false,
                // If JavaScript source maps are enabled, the generated code is expected in this directory.
                "outDir": null
            },
            {
                "name": "Attach",
                "type": "node",
                // TCP/IP address. Default is "localhost".
                "address": "localhost",
                // Port to attach to.
                "port": 5858,
                "sourceMaps": false
            }
        ]
    }
注:Node.js代码中含有ES6特性的代码,需要开启"--harmony",因此 `runtimeArgs` 需要添加一项 "--harmony"

常用的添加环境变量,添加应用参数,node的执行参数等操作都能在这里进行修改,配置完成后再次点击绿色的启动按钮,VSCode就可以开始启动服务了,同时监听了5858端口进行调试操作

debugging

VSCode Debug 操作与浏览器开发者工具、Webstorm调试工具累似,但是自身没有提供命令行终端的信息显示,因此在调试时会打开系统的默认shell进行程序运行的信息显示

支持Markdown


强大的 Sublime Text 2/3 同样支持Markdown语法高亮,但是预览功能却需要插件来实现,可以一键在浏览器中预览。而 VS Code 自带预览功能,Command + Shift + v 可以进行原生地预览,通过开启两栏编辑器可以实现实时预览

previewing

同其他独立 Markdown Editor (Mou、MacDown、马克飞��等等)一样,VS Code同样可以设置 .md 文件的预览样式,通过快捷键组 Command + , 可以快速打开 User Settings 文件,添加如下字段

"markdown.styles": [
    "https://jasonm23.github.io/markdown-css-themes/screen.css"
]

markdown.styles 字段值是一个样式URL的数组,通过指定,我们的预览便在外部样式表(.css文件)的作用下改变了样式,对于颜控党来说美腻的皮肤总是能为书写(开发)带来额外的动力

缤彩主题请戳我

配置任务


VS Code 提供了配置 task.json 文件来快捷键运行 Task 的功能,如 Markdown -> HTML:

    {
        "version": "0.1.0",
        "command": "marked",
        "isShellCommand": true,
        "args": ["sample.md", "-o", "sample.html"]
    }

配置好后在markdown文件焦点处按下快捷键 “Command + Shift + B”即可编译转换,类似也可以运行其他可以通过命令号工具调用的工具,如lessc、gulp、grunt等等

个人觉得目前Task功能很鸡肋,连基本的 watcher 功能都要依赖 Gulp 来实现,而大多数任务通过简单的命令行调用即可,书写配置文件有时候反而把简单的事搞复杂了,况且 package.jsonscripts 字段已经赋予了项目通过配置来运行任务的功能了

    "scripts": {
        "start": "NODE_ENV=production node --harmony server-side/server.js",
        "dev": "NODE_ENV=development node --debug --harmony server-side/server.js",
        "pm2": "NODE_ENV=production pm2 start server-side/server.js --node-args="--harmony"",
        "pm2-dev": "NODE_ENV=development pm2 start server-side/server.js --node-args="--harmony"",
        "local": "NODE_ENV=local nodemon --debug --harmony server-side/server.js",
        "test": "npm run test-jshint && npm run test-mocha",
        "test-mocha": "NODE_ENV=test mocha --harmony ./server-side/**/*.spec.js",
        "test-jshint": "jshint -c .jshintrc server-cd side/**/*.js --exclude server-side/**/*.spec.js --reporter node_modules/jshint-stylish/stylish.js",
        "test-mocha-watch": "NODE_ENV=test mocha --watch --harmony ./server-side/**/*.spec.js"
    },

版本控制


VS Code 支持Git版本控制,提供了基本的stage、commit、fetch、pull、push等Git常用功能,设置项默认开启了后台的 auto git fetch,右侧面板的第三个便是Git管理工具的UI了,点开后当前工程文件的 status 一目了然,通过点击加号就可以把变更的文件 stage 。
编辑器提供的Commit Message输入框还可以让开发者填写多行提交信息(命令行工具不支持)
git-status

它提供了建议的Color Diff工具,清晰地让开发者看到文件变更的差异,提高了diff的效率
git-diff

编辑器底部工具栏左下角清晰地显示了当前开发所处的分支
git-branches

点击当前分支,编辑器会弹出所有(远程、本地)分支以供切换,人性化十足

仍有不足


  • 插件系统的缺乏
  • 编辑器配色缺乏
  • 仍需要更多语言的支持
  • 本地文件历史快照缺乏
  • 光标位置历史的前进、后退

  • ^_^ 欢迎补充

免责声明:文章转载自《Visual Studio Code 不完全使用指南》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇OpenEuler系统安装UKUI图形界面前端日期选择器--只选择年或者年月的My97下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Linux 安装elasticsearch、node.js、elasticsearch-head

前提:下载es的安装包 官网可以下载 es官网 安装elasticsearch 1 新建两个文件夹 一个存放安装文件,一个存放解压后的文件 mkdir -p /export/software //存放安装文件 mkdir -p /export/servers //存放解压后的文件 2 创建es用户 #使用root用户的操作 useradd es...

Nodejs Express笔记

Express做服务器,主要考虑到可能存在的高并发,js写起来也并不麻烦,环境搭建也异常简单。开车~ 由于主要目的就是用于生产环境,所以肯定不能用高版本的Nodejs,选LTS,没错的。 一.安装 这里我的示例工程名称为:expressDemo 1.打开你的cmd,创建你的工程文件夹: mkdir expressDemo &&cd expr...

(转载)程序员的编辑器——VIM

程序员的编辑器——VIM一、VIM的历史1976年左右Bill Joy开发了vi,他也是伯克利大学的毕业生,后来他跟其他人一起成立了Sun Microsystems公司并成为了Sun的首席科学家。一开始Bill开发了ex,尔后开发了vi作为ex的visual interface,也就是说vi允许一次能看到一屏的文本而非一行,vi也因此得名。“早期,当键盘和...

node.js报错:Cannot find module 'xxx'的解决办法

从别处拷贝一份node.js项目,如图  控制台启动 nodemon index.js 后报错:Cannot find module xxx。删除node_modules,在启动时仍提示Cannot find module XXX 只不过XXX变成express了 解决办法: cmd进入到项目目录后,执行:npm install --save expres...

win10下安装npm&cnpm步骤

1.node官网下载安装包 2.分别输入node -v,npm -v检查是否完成 3.配置npm的全局模块的存放路径以及cache的路径,新建node_global和node_cache文件,以下是我的目录文件: D:Program Files odejs ode_global D:Program Files odejs ode_cache 4.对np...

HTTP 请求头中的 X-Forwarded-For

转自:https://imququ.com/post/x-forwarded-for-header-in-http.html HTTP 请求头中的 X-Forwarded-For 我一直认为,对于从事 Web 前端开发的同学来说,HTTP 协议以及其他常见的网络知识属于必备项。一方面,前端很多工作如 Web 性能优化,大部分规则都跟 HTTP、HTTPS、...