资讯专栏INFORMATION COLUMN

VS Code上手与超实用插件安利

miracledan / 2673人阅读

摘要:软件跨平台支持以及,运行流畅,可谓是微软的良心之作微软有这个宇宙最强,自然也不会弱宇宙最强编辑器说到代码编辑器,我们有必要提一提还有。

原文链接:VS Code上手与超实用插件安利

工欲善其事必先利其器

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

微软有 Visual Studio这个宇宙最强IDE,Visual Studio Code 自然也不会弱(宇宙最强编辑器)

说到代码编辑器,我们有必要提一提Sublime Text还有Atom。在开始使用VS Code之前Sublime Text一直是我的主力编辑器,和WebStorm (最强端前端开发工具) 一起用。由于这篇文章主要介绍VS Code下面就简单概括下这几个:

Sublime Text:在我的日常使用中都挺满意,快速,稳定。唯一不爽是证书购买(虽然可以一直无限制使用),没有开源

Atom:你们用着真不卡吗?还是我电脑配置太差,不过UI真的好看

VS code:微软开源,比sublime开源,比atom更快,比webstorm更轻,值得一提的是它用的壳是GitHub开源的Electron。

主要功能

Visual Studio Code首先是一个编辑器,它包含了高效的源代码编辑所需的功能(最为一个编辑器,主要功能当然是代码编辑了) 我们主要还是看看特色功能。

智能感知 Intellisense

智能感知是各种代码编辑功能的总称,包括代码完成,参数信息,快速信息和成员列表。智能感知功能也被称为“代码补全”,“内容帮助”和“代码提示”,这是一个现代编辑器最基本的自我修养了。

VS Code原生就支持JavaScript,TypeScript,JSON,HTML,CSS,Less和Sass的Intellisense,真正的强大之处在于,可以安装语言扩展来配置更丰富的IntelliSense(几乎包括所有主流语言)

内置 Git

VS Code 内置了一个 Git GUI,支持最常用 Git 命令,这使得您可以很容易地看到您在项目中所做的更改。当然了,你可以通过扩展 让他更强大。

调试 Debugging

VS Code对Node.js运行时提供了内置的调试支持,并且可以调试JavaScript,TypeScript和任何其他被转换为JavaScript的语言。对于调试其他语言和运行环境时,我们也可以通过扩展来解决。

终端命令行工具 Terminal

在VS Code中提供了一个功能齐全的集成终端,这非常方便,因为您不必切换窗口或更改现有终端的状态就可以快速执行命令

扩展市场 Extensio

对于强大的插件市场来说,它自带的功能只是和开始而已。随着VS Code的流行,基本上你能找到所有你想要的插件(实在找不到你还可以自己开发)

更多请查阅https://code.visualstudio.com/docs

开始上手

关于VS Code的使用也很简单

下载安装:去到它的官网https://code.visualstudio.com/,下载对应版本,然后按照提示一直下一步就好

基本使用:在你安装好后,就可以看到有用的用户欢迎指引界面

你可以在学习栏点击各项,迅速上手这个编辑器÷。下面主要就是推荐一些好用插件了,

插件安装方式

关于插件的安装,在看了界面概述后也应该是知道怎么安装了:

直接在扩展管理中键入你要下载的扩展名称或者关键字搜索下载

使用快捷键⇧+⌘+P,打开命令面板,输入如下命令即可

ext install 扩展名

还可以从插件主页直接点击下载,他会唤起VS Code自动下载

基本配置

关于VS Code的各项设置,都在一个JSON文件中,左边是默认设置,右边是我们自己的设置,分为用户设置和工作区设置,我们只需要在右边我们编辑设置并保存即可。工作区设置后各项设置会保存在.vscode文件夹下。

新安装一个编辑/IDE,最先干的就是调字体(vscode 中可以直接按⌘加加号/减号调节字体),调颜色等外观配置了吧。

主题推荐

VS Code已经自带了很多个好看的主题,比如说我一直用的Solarized Dark

这里我再推荐几个不错的,

One Dark Pro: Atom 标志性的主题

Atom One Dark Theme: 另一个基于 One Dark 的主题

Dracula Official:超好看

Material Theme 一个简单而又干净的主题,有很多配置选项用于颜色配置

单单安装了主题还不够,我们还要好看的图标来足视觉体验:

vscode icons

Material Icon Theme

更多好看主题请浏览https://marketplace.visualstudio.com/search?target=VSCode&category=Themes

实用插件

filesize:在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

Path Intellisense:文件路径补全,在你用任何方式引入文件系统中的路径时提供智能提示和自动完成

vscode-fileheader:顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间

Git Lens:查看详细的git记录,内置功能很多

Git History (git log):一个好用的Git 历史查看工具

npm: 可以直接在vscode执行npm的一些命令

Npm Intellisense:NPM 依赖补全,在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成

Debugger for Chrome:让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试

JavaScript (ES6) code snippets:常用的类声明、ES 模块声明、CMD 模块导入等

ESLint:代码语法检查

Beautify:格式化代码的工具

open-in-browser: 在浏览器中预览HTM文件

HTML Snippets:各种 HTML 标签片段

IntelliSense for CSS class names:CSS 类名补全,会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示

Document This: js 的注释模板

Settings Sync:同步你得设置和插件

结语

我们从外观配置开始到插件推荐结束,到此基本上你就能打造出一个有自己风格强大编辑器,开发效率自然也是很高。你有什么好用的插件?欢迎留言交流!让更多的人知道。

同时,建议移步官网看看https://code.visualstudio.com/,那儿有更全更细的文档,有助于我们更好的使用它。

欢迎关注微信公众号:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89991.html

相关文章

  • 架构师之路

    摘要:因为用户不用在第一次进入应用时下载所有代码,用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的,让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

    NikoManiac 评论0 收藏0
  • 为什么我选择使用 VS Code进行前端开发?

    摘要:我们团队有大部分人已经在用了,所以这周五在组内做了一个小分享,来发掘一些提高开发效率的小技巧。为什么选择在刚出来的时候,我就开始使用了如何评价理由很简单开源,免费,颜值高微软出品,实力保证。 showImg(https://segmentfault.com/img/remote/1460000010750652); 没错,我就是来给大家安利 VS Code 的。 对前端来说,这是一款性...

    liaosilzu2007 评论0 收藏0
  • 前端开发 VS Code 上手使用

    摘要:如果想配置开发工具面向前端及开发人员的配置如果想配置开发工具配置及使用技巧所谓网红编辑器,我觉得比来的更爽,因为的所有操作和插件,对于来说也就是一个插件就能无缝兼容。作为一个前端开发,开箱即用的代码编辑高亮提示都十分友好。 如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置 如果想配置 vim 开发工具 => sublime配置及使用技巧 所谓网红...

    Ocean 评论0 收藏0
  • vs code 插件折腾记(一)

    摘要:以下简称是微软开发同时支持和系统且开放源代码的代码编辑器,并且是开源免费使用的,也是当下最受欢迎的代码编辑器之一官网下载地址文章已更新插件折腾记二经过我一段时间的使用,发现一些插件是必不可少的,现在给大家推荐一些非常实用的插件下载好安装打开 Visual Studio Code(以下简称vs code) 是 微软开发同时支持Windows、Linux、和macOS系统且开放源代码的代码...

    lidashuang 评论0 收藏0
  • vs code 插件折腾记(一)

    摘要:以下简称是微软开发同时支持和系统且开放源代码的代码编辑器,并且是开源免费使用的,也是当下最受欢迎的代码编辑器之一官网下载地址文章已更新插件折腾记二经过我一段时间的使用,发现一些插件是必不可少的,现在给大家推荐一些非常实用的插件下载好安装打开 Visual Studio Code(以下简称vs code) 是 微软开发同时支持Windows、Linux、和macOS系统且开放源代码的代码...

    vslam 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<