当前位置:网站首页资讯教程软件教程→详情

微软发布免费跨平台的轻量级代码编辑器 Visual Studio Code

时间:2020-03-09    人气:1490    作者/来源:下载无忧

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

下载地址:Visual Studio Code官方稳定版下载

为什么选择VS Code工程开发

强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

作为前端开发的我,之前的开发过程中一直用的是Atom这一款IDE,再配上了好看的主题插件很nice,Atom的界面是真心好看,但是插件装多了你们真的不觉得卡吗,VS Code比Atom更加的流畅,比webstorm更轻量级。一次偶然换的工作后,项目组要求统一IDE,让我了解到了VS Code,这边简单介绍下VS Code日常开发的需求。

  • 开源,免费;
  • 自定义配置
  • 集成git
  • 智能提示强大
  • 支持各种文件格式(html/jade/css/less/sass/xml)
  • 调试功能强大
  • 各种方便的快捷键
  • 强大的插件扩展
  • VS Code精选主题

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    主题插件安装流程

    首先先简单介绍些主题插件的安装流程:

    第一步,点击扩展商店搜索你要找的插件名称如Atom One Dark Theme,点击安装;

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    第二部,安装好了之后只是证明你本地的VS Code上面有这个插件了,还需要将当前使用的主题插件切换成你想要的才行;

    ①点击右下角的设置按钮,进入命令面板;

    ②搜索颜色主题关键字;

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    ③点击想要的主题完成切换。

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    一个编辑器界面的好看与否,真心挺重要的。下图是笔者配置好的VS Code界面截图,下面推荐几款好看的主题:

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    VS Code 主题插件列表(推荐)

    1. One Dark Pro

    One Dark Pro的主题界面效果如下(推荐指数5星) One Dark Pro

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    2. Atom One Dark Theme

    Atom One Dark Theme的主题界面效果如下(推荐指数5星) Atom One Dark Theme

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    3. Eva Theme

    Eva Theme的主题界面效果如下(推荐指数5星) Eva Theme

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    4. Material Palenight Theme

    Material Palenight Theme的主题界面效果如下(推荐指数5星) Material Palenight Theme

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    更多Visual Studio Code 主题插件请参考VS Code Downloads

    VS Code精选插件

    VS Code所有的插件都可以在VS Code Downloads插件库中找到,如下图:

    Auto Close Tag

    Auto Close Tag:匹配标签,关闭对应的标签。对于HTML/XML很实用。

    Auto Rename Tag

    Auto Rename Tag:改变标签的时候同时改动开闭合标签;对于HTML/XML很实用。

    HTML CSS Support

    HTML CSS Support : 这个也是HTML必备插件之一。

    CSS Peek

    CSS Peek : html和css中关联css的跳转

    Code Runner

    Code Runner : 代码编译运行看结果,支持众多语言

    Git History

    Git History : 查看git分支提交日志的插件

    Git History Diff

    Git History Diff : 寻找每一个git分支上面提交过的节点,并可以对比差异性。

    Path Autocomplete

    Path Autocomplete : 路径智能补全插件。

    Path Intellisense

    Path Intellisense : 路径智能提示插件。

    beautify

    beautify :良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用;但是react工程的jsx文件用beautify插件格式化会乱掉,建议不要用

    Prettier - Code formatter

    Prettier - Code formatter : 代码格式化插件,主要针对工程中的JavaScript / TypeScript / CSS

    Prettier Now

    Prettier Now : 支持语言比较全面的代码格式化插件,主要是支持jsx /tsx ,还有sass / less等(问的react工程基本上就是用这2个Prettier插件格式化代码)

    Terminal

    Terminal : vs code 内置的命令行插件,也比较实用。

    Bookmarks

    Bookmarks : 这个插件支持在文件特定的行做标记,更好的提高开发效率。

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    Bracket Pair Colorizer

    Bracket Pair Colorizer :很多括号的情况下,这个插件可以做一个颜色的区分,代码一目了然。

    强大微软 VS Code免费跨平台代码编辑器,支持多种编程语言与系统

    Chinese (Simplified) Language Pack for Visual Studio Code

    Chinese (Simplified) Language Pack for Visual Studio Code : 适用于 VS Code 的中文(简体)语言包。

    filesize

    filesize : 编辑器底部显示当前文件的大小。

    Markdown Preview Enhanced

    Markdown Preview Enhanced : 本地Markdown文档预览插件。

    vscode-icons

    vscode-icons : 一套vs code的图标插件。

    npm

    npm : 不多说npm。

    open-in-browser

    open-in-browser : 一键在浏览器中打开

    Live Server

    Live Server :一键开启本地服务。

    Local History

    Local History :个人感觉很有用 本地代码的一个保存日志,在没有git,svn,或者很长时间没有提交过代码的情况下,感觉挺实用,再也不怕代码回滚。

    GitLens — Git supercharged

    GitLens — Git supercharged : GitLens能增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者,无缝地导航和探索Git存储库,通过强大的比较命令获得有价值的见解。

    VS Code常用快捷键

    VS Code的快捷键有很多,需要具体的请仔细参考 VS Code => 右下角设置按钮=> 键盘快捷方式

    我们也可以自定义快捷键,在keybindings.json里面设置覆盖即可

    快捷键完全是个人操作习惯,这里不多介绍,我常用的有这几个:

    打开命令面板cmd+shift+p/F1打开设置页面cmd+,删除一行cmd+E(自定义)添加书签cmd+option+k代码格式化control+opiton+B

    VS Code git代码管理实战

    git现在是很常见的代码管理工具,VS Code 也有内置的git插件,当然,要是你觉得不完美,可以安装一些常用的git插件等,简单介绍下VS Code 下git的提交步骤。

    这里我以GitHub上面新建的一个仓库为例,仓库新建后默认分支是master,这里我在GitHub上新建了2个远程分支develop01和develop02,当你在VS Code中点击切换到某一个远程分支的时候,VS Code会自动给你创建一个和当前远程分支对应的本地分支,如origin/develop02 对应develop02,如origin/master 对应master,如上图所示。

    现在我们在master分支上面提交代码,

    • 第一步,先暂存要提交的文件
    • 第二步,填下提交日志
    • 第三步,点击对勾按钮完成提交

    提交好了之后还需要拉取git远程分支的代码才能推送。

    • 第四步,拉取远程代码,解决冲突
    • 第五步,推送到远程分支上

    然后就没有然后了,提交完成。

    假如你因为工作需求的原因,需要在不同的分支上面提交不同的代码,那就涉及到分支的切换了。首先第一步,切换分支之前先提交代码,不然老是有报错日志,切换了分支后,本地的代码也会对应分支改变。

    如上图,master切换成develo01之后,master分支上刚提交的代码成了develo01上对应的代码。

    你问我答

    1.VS Code 怎么更改默认的设置?

    笔者使用的是mac,使用快捷键 Com + , 打开用户默认设置界面,左边是默认设置,右边是自定义设置,根据个人工作场景而定吧,就像我这边就统一格式化代码缩进4格等,还可以设置忽略一些文件夹等。

    {"explorer.confirmDelete":false,//主题"workbench.iconTheme":"vscode-icons",//小地图"editor.minimap.enabled":true,//主题风格OneDarkPro"workbench.colorTheme":"OneDarkPro","window.zoomLevel":1,"extensions.autoUpdate":false,//字体大小"editor.fontSize":13,"editor.snippetSuggestions":"top","diffEditor.ignoreTrimWhitespace":true,//设置格式化缩进4格"prettier.tabWidth":4,"vetur.format.defaultFormatter.html":"prettier","gitlens.advanced.messages":{"suppressShowKeyBindingsNotice":true},"gitlens.historyExplorer.enabled":true,"atomKeymap.promptV3Features":true,"editor.multiCursorModifier":"ctrlCmd",//粘贴自动格式化"editor.formatOnPaste":false,//保存自动格式化"editor.formatOnSave":false,//用来忽略工程打开的文件夹"files.exclude":{"**/.vscode":true,"**/.DS_Store":true,"**/.history":true,"**/nbproject":true},//用来忽略搜索的文件夹"search.exclude":{"**/node_modules/**":true,"**/bower_components/**":true,"**/image/**":true,"**/*.xml":true,"**/.history/**":true,"**/nbproject/**":true,"**/vscode/**":true},//创建和更新代码的头部信息作者"fileheader.Author":"Baldwin","fileheader.LastModifiedBy":"Baldwin",}

    关于我们|网站帮助|网站声明|联系我们

    Copyright @ 2020-2028 下载无忧.All Rights Reserved

    下载无忧是一个绿色、安全、免费的下载网站,提供电脑软件、网络游戏、手机应用、手机游戏下载

    备案编号: 豫ICP备16017571号-3    公安备案号:41010402002332

    服务热线

    170-8835-6868

    微站

    扫描微站