0050 VSCode software

VS Code mountable

Skilled in the use of software VS Code

VS Code can install the most commonly used plug-ins

VSCode Profile

Visual Studio Code (abbreviated VS Code / VSC) is Microsoft launched a free open source lightweight modern code editor that supports almost all mainstream development language syntax highlighting, smart code completion, GIT and other features, support plug-in extensions and so on.

Recommended reason:

  • Open source than the sublime, lighter than webstorm

  • Very powerful smart tips

  • Comes emmet

  • Plug-in installation is very easy

  • Comes with powerful debugging features

  • Cross-platform software support Win, Mac and Linux.

VSCode installation

Download the official website: https://code.visualstudio.com/

Here Insert Picture Description

installation steps:

Fool installation, you can direct the next step.

  • If you need to change the default installation path, the choice of the target position directly modified.

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-IwCeiXpq-1576901144081) (C: \ Users \ SuperHan \ AppData \ Roaming \ Typora \ typora-user-images \ 1538966028740.png)]

  • For future ease of use, it is recommended to create a desktop shortcut.

    [Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-9wTTW3WE-1576901144084) (C: \ Users \ SuperHan \ AppData \ Roaming \ Typora \ typora-user-images \ 1538966181746.png)]

VSCode use

File directory management

  • Select File, then Open Folder, open the folder.

Here Insert Picture Description

  • The main interface is divided into EXPLORER (Explorer interface) and code editing page.

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tepRP7yv-1576901144087)(C:\Users\SuperHan\AppData\Roaming\Typora\typora-user-images\1538967582843.png)]

颜色主题

  • 设置首选项按钮 -- Color Theme

Here Insert Picture Description

  • 在弹出的选择主题界面,选择喜欢的主题界面即可。其中Monokai是与sublime一致的风格。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YkE3UzUH-1576901144092)(C:\Users\SuperHan\AppData\Roaming\Typora\typora-user-images\1538969427638.png)]

其他操作

  • 放大缩小视图:ctrl + 加号 和 ctrl + 减号

  • 向上复制一行:alt+shift+↑

  • 向下复制一行:alt+shift+↓

  • 当光标点击到某一行时,默认选中全行,可以直接复制粘贴

VSCode 插件安装

安装方法

点击左侧《扩展》图标,在搜索框输入需要安装的插件名称,点击install进行安装即可。安装完毕,需要重新加载软件使插件生效。

Here Insert Picture Description

Here Insert Picture Description

推荐安装的插件

插件 作用
Chinese (Simplified) Language Pack for VS Code 中文(简体)语言包
Open in Browser 右击选择浏览器打开html文件
JS-CSS-HTML Formatter 每次保存,都会自动格式化js css 和html 代码
Auto Rename Tag 自动重命名配对的HTML / XML标签
CSS Peek 追踪至样式

注意:插件安装需要联网。

禁用或卸载已安装的插件

在扩展界面,点击“更多操作”(三个点),选择“显示安装的扩展”,在列表中找到需要禁用的插件,点击“禁用”或者“卸载”即可。同样操作完毕需要重新加载生效。

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-7QHlFYtH-1576901144096) (C: \ Users \ SuperHan \ AppData \ Roaming \ Typora \ typora-user-images \ 1538971382289.png)]

Guess you like

Origin www.cnblogs.com/jianjie/p/12127084.html