python rename variables in vsc_vsc: Visual Studio Code Guide[Simple Chinese][简体中文]

visual studio code

Visual Studio Code(以下简称vsc)最近更新到了v1.1.0版本

vsc是一个比较潮比较新的编辑器(跨平台Mac OS X、Windows和 Linux )

vsc功能和textmate、sublime、notepad++，ultraedit等比较，毫不逊色

vsc尤其是在nodejs(调试)和typescript、go上支持尤其好

vsc提供了自定义 Debugger Adapter 和 VSCode Debug Protocol 从而实现自己的调试器

值得一学，目前在我的团队内部已经大面积推广，反馈不错

介绍

vsc的宣传语是：

一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

按它说的，vsc特别适合来作为前端开发编辑器。

内置html开发神器emmet(zencoding),对css及其相关编译型语言Less和Sass都有很好的支持。

当然，最nice的还是写js代码了，这也是我接下来要着重介绍的功能。

目前vsc已经开源了：

特性

Free但不开源(目前已经开源)

Build(构建)和 debug(调试) 现代web和云应用(尤其是JavaScript、TypeScript、C#、ASP.NET v5 和 Nodejs)

跨平台支持Linux, Mac OSX, and Windows

支持语法自动补全，智能提示

内置html开发神器emmet

速度、调试效率非常快

支持多主题(配色方案)0.9.1之后更爽

对于其他编辑器的高效操作和快捷键都有继承(训练习惯的时候会讲)

插件系统

系统要求

Ubuntu Desktop 14.04

OS X Yosemite

Windows 8.0, 8.1 and 10 (x86 and x64)

另外 Linux 还需要额外的

GLIBCXX version 3.4.15 or later

GLIBC version 2.15 or later

版本说明

标准版: automatic updates on by default

Insiders Build：subscribe to what we called the “Insiders Channel” which gave you get early access to monthly drops, letting you check out new features, test an extension, or even help us find that last-minute show stopper issue.

安装

VSCode内置了一个code命令可以在命令行下打开文件(推荐)

如果低版本的，可以考虑用coden来处理。

如果是mac系统，加简单的命令行

[sudo] npm install -g coden

当前目录打开vsc编辑器

$ vsc

每次去桌面找快捷方式是非常傻的办法，终端里输入几个字母就可以搞定，又何必那么费劲呢？

键盘一定比鼠标操作快，你还是用鼠标么？土不土？

这个模块是nodejs写的，后面会讲

功能区说明

功能区1：4大主菜单

Explore

Git

Debug

分别是文件夹，搜索，git和调试

功能区2：二级菜单

点击每个主菜单都会显示对应的二级菜单，比如Explore就是打开的目录，具体在后面讲解

功能区3：编辑区

我们最常用的编码区

功能区4：信息显示区

当前git信息，格式，字符编码等

master+ 0↓ 1↑

master代表当前git分支是master分支

0↓ 代表远端repo没有本地的代码信息

1↑ 代表本地有1个提交需要push到服务器

点击此处，会弹出

git checkout 输入git分支名

切换分支,很贴心

语法校验，哪里出错，哪里有警告点击一下此处就都能看到，但不是完全准，算仅供参考吧

Ln = line 第几行

Col = column 第几列

UTF-8 是字符编码

LF 是换行方式，点击即可切换。选项说明

1)LF是line feed的缩写，中文意思是换行

2)CRLF 是carriagereturnlinefeed的缩写。中文意思是回车换行。

Markdown 代表当前根据后缀识别的语言，用于语法高亮渲染

☺ 是意见反馈

稍微点评一下，微软的界面做的还是下了功夫的，细节处理的不错

Integrate with External Tools via Tasks

vsc还是支持各种task，Gulp, Grunt 或 Jake等

常见的各种编译，如markdown编译成html，sass编译成css，coffee或typescript编译成js等

当也有各种语法编码校验

Workbench主菜单说明

Explore

这个菜单主要是对文件夹和文件的管理

这里有2个概念

WORKING FILES

DIR

DIR很好理解，就是你当前打开的文件夹

working files是已打开的所有文件，如果此时点击右上角的分屏按钮，可以把文件放到对应的编辑区里。

打开文件夹在菜单里，快捷键command + o

常见的各种搜索都支持了，很强大

如果设置快捷键cmd+2，直接定位到搜索框，输入文字后，直接回车就是全文搜索

Git

git是目前最常用的版本控制软件，推荐命令行操作，这样对原理理解的更深入，可以避免很多gui莫名其妙的问题

vsc对它进行了抽象，提供的功能，刚刚好够用

它还有diff功能，虽然大部分时间我用命令行，但我也会用它的diff和commit的

简单明了

下面给出一些git学习资料(如果熟悉，自动跳过)

要注意：vsc不提供创建git项目功能，所以需要先创建git项目，然后打开再用它编辑

Debug

为什么选用vsc，一个原因就是因为调试

node-inspector虽好，项目一大特别慢，这方面vsc做了不少优化

tdd/bdd虽好，还不能完全实现

vsc官方说

We improved stepping performance by loading the scopes and variables

of stack frames lazily. This improvement is based on a protocol change

that affects all debug adapters.

意思就是他们做了很多优化

使用中，确实比node-inspector快很多

vsc调试使用方法也很简单,步骤如下：

打开要调试的文件，按f5,编辑器会生成一个launch.json

修改launch.json相关内容，主要是name和program字段，改成和你项目对应的

点击编辑器左侧长得像蜘蛛的那个按钮

点击左上角DEBUG后面的按钮，启动调试

打断点，尽情调试(只要你会chrome调试，一模一样)

express调试实例

这是我们最常用的调试

通过创建express项目构建，调试来演示vsc的具体用法

创建express项目

使用express-generator

➜ examples git:(master) ✗ express helloworld

create : helloworld

create : helloworld/package.json

create : helloworld/app.js

create : helloworld/public

create : helloworld/public/javascripts

create : helloworld/public/images

create : helloworld/public/stylesheets

create : helloworld/public/stylesheets/style.css

create : helloworld/routes

create : helloworld/routes/index.js

create : helloworld/routes/users.js

create : helloworld/views

create : helloworld/views/index.jade

create : helloworld/views/layout.jade

create : helloworld/views/error.jade

create : helloworld/bin

create : helloworld/bin/www

install dependencies:

$ cd helloworld && npm install

run the app:

$ DEBUG=helloworld:* npm start

➜ examples git:(master) ✗ cd helloworld

➜ helloworld git:(master) ✗ npm install

➜ helloworld git:(master) ✗ npm start

测试express项目是正常的。

说明：如果是自己的项目，需要自己构建git版本控制的，faq里有具体说明。

修改launch.json的内容

输入command + t快速定位文件：.vscode/launch.json

修改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 helloworld",

// Type of configuration. Possible values: "node", "mono".

"type": "node",

// Workspace relative or absolute path to the program.

"program": "examples/helloworld/bin/www",

// 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"],

// Environment variables passed to the program.

"env": {

"NODE_ENV": "development"

// 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

}

]

}

核心内容

"name": "Launch helloworld",

"type": "node",

"program": "examples/helloworld/bin/www",

program是要执行的express的入口。

这里的helloworld是项目，所以找到/bin/www目录即可。

点击调试按钮

会弹出一个窗口，执行如下命令

cd '/Users/sang/workspace/github/vsc-doc'; env 'NODE_ENV=development' 'node' '--debug-brk=44412' '--nolazy' 'examples/helloworld/bin/www'

Debugger listening on port 44412

其实node-inspector也是这个原理的。

增加断点

此时访问

curl http://127.0.0.1:3200/

进入调试界面

和chrome的调试是一样的。

点击1)处按钮，打开控制台，配合调试，在控制台里查看对应的变量值

另外值得说明的是二级菜单里4个部分

a)variables变量

b)watch观察

c)call stack 调用栈

d)break points 断点

它和chrome的调试也是一样的，此处就不多讲了。

课后作业：亲手debug一次，感受一下vsc的魅力

自动补全(智能提示)

因为之前微软推出了typescript语言，结合tsd文件，用visual studio写typescript代码是相当爽的，智能提示的功能非常nb。

这个功能理所应当也被vsc继承了。

vsc的自动补全用的是typings。

The TypeScript Definition Manager(之前的tsd已经弃用了，faq里有说明)

和npm很像，有木有？

目前主流的前端类库/框架，包括node.js及其模块/框架都有相应的tsd文件，可以去typings上找一下。

那么就可以安装typings之后，使用

npm install typings --global

cd vsc-doc

typings install dt~node --global --save

typings install express --ambient --save

和npm很像，有木有？

此时看一下当前目录，下面的express.d.ts文件即是具体提示用的。

typings/express/express.d.ts

在代码编辑区里，输入CTRL+SPACE(默认快捷键)就可以有提示了。

目前node.d.ts版本还是0.12.0，和node v4的api差不了多少(最新的已经是4.x了)

自定义快捷键

上面是基本的操作，下面看点高效的使用：自定义快捷键

查看快捷键

菜单view里找 Command Palette项

view -> Command Palette(调色板)

对应的快捷键是shift + command + p

敲完后，输入tri

修改快捷键

但是CTRL+SPACE在我的电脑里已经占用了，所以还是需要修改一下的，见下图

打开快捷键配置

修改如下

即把

// Place your key bindings in this file to overwrite the defaults

[

{ "key": "ctrl+space", "command": "editor.action.triggerSuggest",

"when": "editorTextFocus" }

]

改成

// Place your key bindings in this file to overwrite the defaults

[

{ "key": "shift+space", "command": "editor.action.triggerSuggest",

"when": "editorTextFocus" }

]

此时，就是输入SHIFT+SPACE就可以有提示了

说明：key就是快捷键，command是编辑器的操作

Workbench主菜单快捷键

熟悉mac的都知道folder里的cmd+1|2|3|4切换文件夹显示，其实我们也可以使用类似的快捷键来提高工作效率

xcode里面也是，所以command键是我最常用的快捷键

推荐配置如下，按照顺序来，好记

{ "key": "cmd+1", "command": "workbench.view.explorer" },

{ "key": "cmd+2", "command": "workbench.view.search" },

{ "key": "cmd+3", "command": "workbench.view.scm" },

{ "key": "cmd+4", "command": "workbench.view.debug" },

{ "key": "cmd+5", "command": "workbench.view.extensions" }

这样配置可以让大拇指最少移动，以大拇指为中心，快速切换，速度非常快

working files切换

一个编辑区里，vsc是不缓存的，毕竟是js写的，相对较弱，这其实是vsc的一个优化

所以cmd + p 打开了文件之后，之前的文件就找不到了

实际上都存到working files里了，只要我们切换working files即可

mac下ctrl + -和shift+ctrl + -切换当前working files

还是很爽的

快捷键配置原理

原理说明：我们可以看到2个配置文件，一个是不能修改的，另一个是空的，后面的会把前面的覆盖

// 将defaults 和 options 参数合并到{}

var opts = $.extend({},$.fn.tab.defaults,options);

把options里的覆盖$.fn.tab.defaults。

合并后的的配置项，再和{}合并，至少保证配置是{}

快捷键(默认)

自动补全 command + SPACE

快速打开文件 command + o

快速定位文件 command + p

分割编辑窗口 command + \

关闭当前窗口 command + w

隐藏二级菜单 command + b

放大 command + =

缩小 command + -

插入表情 ctrl + command + space

列编辑 alt + shift 然后使用鼠标点选即可，也算是比较实用

跳转行 ctrl + g

搜索

当前文档里搜索 command + -

所有文档里搜索 shift + command + -

我的玩法(常用快捷键)

ctrl + command + f 放大到全屏

设置Workbench主菜单快捷键，然后就有了command + 1到4的快捷键，快速切换

command + b 显示或隐藏(奇数次和偶数次)二级菜单，让可视区更大

可视区内command + \ 新建编辑窗口(尤其是markdown里面，一个编写，一个预览shift + command + v)

可视区内command + w 关闭编辑窗口

command + p 快速打开文件

使用ctrl + -或者shift + ctrl + -切换working files

当前文档里搜索 command + -

所有文档里搜索 shift + command + -

shift + opt + f格式化

跳转行 command + l(保持和textmate一致)

ctrl + ~打开或关闭terminal (v1.2新增功能)

配置文件

配置iconTheme

{

"workbench.iconTheme": "vscode-icons",

}

开启minimap

{

"editor.minimap.enabled": true

}

jsconfig.json

最新的1.0版本，右下角会有个

python rename variables in vsc_vsc: Visual Studio Code Guide[Simple Chinese][简体中文]相关推荐

mac 打开html c python,在Mac系统使用Visual Studio Code运行Python的方法
在Mac系统使用Visual Studio Code运行Python的方法发布时间:2020-08-10 10:29:31 来源:亿速云阅读:105 作者:小新在Mac系统使用Visual St ...
visual studio code Python终端运行_黄哥Python：VS Code 10个Python 插件
转载自 https://medium.com/issuehunt/10-visual-studio-code-extensions-for-python-development-de0be51bbee ...
带你掌握Visual Studio Code的格式化程序
摘要:Visual Studio Code 中的所有语言都可以使用其中一种自动格式化程序进行格式化,并且 Python 扩展还支持 linter. 本文分享自华为云社区<Visual Studi ...
Visual Studio Code插件
文章目录 Visual Studio Code插件 1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 2. ESL ...
visual studio code 里调试运行 Python代码
最近对微软的visual studio code 挺感兴趣的,微软的跨平台开发工具.轻量简洁. 版本迭代的也挺快的,截止16年8月2日已经1.3.1版本了,功能也愈加完善.(16年12月18日已经, ...
python网页运行环境_Python小牛叔Web开发1：安装Visual Studio Code配置Python运行环境...
本系列是Python小牛叔Web开发系列,以Django为框架介绍如何使用Python来开发Web应用,本教程适合对于Web开发有基本知识的入门者. 1.安装Visual Studio Code编辑器 ...
visual studio code python插件下载_visual studio code 的必装推荐插件plugin, vscode, vsc
An Old Hope Theme (theme, 推荐,且推荐它的 classic theme,安装后在颜色选项里选择,该插件的定制见文末) Cobalt2 (theme) Drac ...
visual studio code Python终端运行_VS Code 6 月 Python 扩展更新
优质文章,第一时间送达! 微软发布了 6 月的 Visual Studio Code Python 扩展更新,此版本除了解决 53 个问题外,还开发了新功能,例如逐行运行和启动页面. 逐行运行(Run ...
Visual Studio Code 202008 Python 扩展更新
微软发布了 8 月的 Visual Studio Code Python 扩展更新,此版本总共修复了总共 38 个问题. 主要更新内容包括: 支持多个 Python 交互式窗口这是用户呼声最高的功能 ...

python rename variables in vsc_vsc: Visual Studio Code Guide[Simple Chinese][简体中文]

python rename variables in vsc_vsc: Visual Studio Code Guide[Simple Chinese][简体中文]相关推荐

最新文章

热门文章