vscode-代码编辑器的全称是“visual studio code”,主要是一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。
百度搜索vscode点击官网(https://code.visualstudio.com/)下载编辑器,通常它会自动判别你的电脑版本是Mac、windows或者linux的,系统分为32bit或者64bit

如何查看电脑版本系统型号?电脑鼠标右键点击此电脑查看属性,然后根据你自己电脑版本型号下载就OK,文件大概60M样子,下载速度取决你的网速。下载完成后,桌面会出现下载好的安装包,直接点击安装程序,接着同意协议(如果不接受协议,你没办法下一步);勾选创建桌面快捷方式与添加到PATH(重启后生效)按钮,然后点击下一步选择你软件的安装位置,最后点击完成,你会发现你的桌面上多了一个Visual Studio Code的快捷方式

如图所示:打开编辑器看到是全英文的,左边是编辑器的活动栏,控制资源管理器和安装插件,栏目上方菜单栏主要是用来控制文件和编程的,注意1.文件名后缀是以.html结尾2.通过vscode菜单栏创建或者新建文件的快捷键是CTRL+N,文件保存CTRL+S,3.通过vscode资源管理器创建

如何查看文件名的后缀?桌面新建文件夹点击“工具”——选择文件夹中的“查看”——把勾选“隐藏已知文件类型的扩展名”去除,那么你桌面上的文件就会显示文件格式了。

当然编程嘛!英文更有利于培养我们的思维习惯,但是用着总不是很舒服,所以我们首先需要把Visual Studio Code汉化下,打开编辑器安装中文简体插件“Chinese (Simplified) Language Pack for Visual Studio Code”

安装完成,会出现Restart Now按钮,点击确定,意思是软件立即重启,刚安装的Chinese (Simplified) Language Pack for Visual Studio Code的中文简体语言包才能生效

最后再安装下HTML CSS Support是CSS自动补全插件与js代码错误自动检测插件ESLint

最后为了便于调试,不至于每次打开文件都到文件夹中,我们再安装一个插件open in browser  代码在浏览器中打开,默认打开浏览器的快捷键是ALT+B;打开其他浏览器是shift+alt+b

最后Visual Studio Code具有自带emment代码生成系统,自动补齐代码功能,关于自定义代码块的设置(点击右下角齿轮——用户代码片段-选择html.json)

最后关于vscode的快捷键网址(多看多用多记https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)

如何使用vscode-代码编辑器工具的更多相关文章

  1. vscode代码折叠方法

    最近换用了vscode代码编辑器,在查看c源码的时候想折叠所有区域的代码,不知道快捷键是哪一个?查看了使用说明,快捷键如下: 1. 折叠所有区域代码的快捷: ctrl + k      ctrl + ...

  2. vscode代码部署

    前言 在本地环境中开发代码时,经常需要将代码上传到服务器环境中,在环境中构建并调试程序.如果手动使用scp.ftp等文件传输程序将代码上传至环境,一次两次还好,反复多次操作则有些繁琐. 为了方便进行本 ...

  3. (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定

    本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...

  4. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  5. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  6. PHP代码静态分析工具PHPStan

    最近发现自己写的PHP代码运行结果总跟自己预想的不一样,排查时发现大多是语法错误,在运行之前错误已经种下.可能是自己粗心大意,或者说php -l检测太简单,不过的确是有一些语法错误埋藏得太深(毕竟PH ...

  7. 代码编辑器——Visual Studio Code

    一.介绍 Visual Studio Code(简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代 ...

  8. 常用 Java 静态代码分析工具的分析与比较

    常用 Java 静态代码分析工具的分析与比较 简介: 本文首先介绍了静态代码分析的基 本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代码分析工具 (Checkstyle,FindBu ...

  9. 最近开始研究PMD(一款采用BSD协议发布的Java程序代码检查工具)

    PMD是一款采用BSD协议发布的Java程序代码检查工具.该工具可以做到检查Java代码中是否含有未使用的变量.是否含有空的抓取块.是否含有不必要的对象等.该软件功能强大,扫描效率高,是Java程序员 ...

  10. Sublime Text 2 - 性感无比的代码编辑器!程序员必备神器!跨平台支持Win/Mac/Linux

    我用过的编辑器不少,真不少- 但却没有哪款让我特别心仪的,直到我遇到了 Sublime Text 2 !如果说“神器”是我能给予一款软件最高的评价,那么我很乐意为它封上这么一个称号.它小巧绿色且速度非 ...

随机推荐

  1. Windows10怎么用Administrator登录?

    1.首先按下快捷键win+X键, 2.然后在命令提示符中输入命令“net user administrator /active:yes”后回车 3.此时administrator管理员账户已开启,点击 ...

  2. 遇到的一些在ie下的兼容问题和解决方案(ie10+)

    1,ie 10下实现水平垂直居中,不固定高度的话,正常的top:50%,left:50%,transform(translate(-50%,-50%)) 是不能实现的,ie下top:50%会失去效果. ...

  3. 命令行开启WIFI

    netsh wlan set hostednetwork allow   //netsh wlan set hostednetwork mode=disallow netsh wlan set hos ...

  4. CCF_ 201509-3_模板生成系统

    又是一道考验细心和耐心的题,不知道哪里出问题了,一直只有90分 = =! #include<cstdio> #include<iostream> #include<cst ...

  5. The 2019 University of Jordan Collegiate Programming Contest

    链接:https://codeforc.es/gym/102267 A. Picky Eater 直接比较 int main(){ int x ,y; scanf("%d %d" ...

  6. Codeforces 1087C Connect Three (思维+模拟)

    题意: 网格图选中三个格,让你选中一些格子把这三个格子连起来,使得选中的格子总数最小.最后输出方案 网格范围为1000 思路: 首先两点间连起来最少需要的格子为他们的曼哈顿距离 然后连接方案一定是曼哈 ...

  7. JAVA 调用控件开发

    最近homoloCzh有个小伙伴接到一个需求说是把一个c# 写的具备扫描.调阅等功能 winfrom 影像控件嵌入到java Swing当中,让小伙伴很苦恼啊,从年前一直研究到年后,期间用了很多种方法 ...

  8. 二维数组转稀疏数组、稀疏数组恢复二维数组(Java实现)

    public static void main(String[] args) { // 创建一个原始的二维数组 9*9 int chessArr1[][] = new int[9][9]; // 0表 ...

  9. create-react-app 打包后静态文件过大 webpack优化

    在最近的项目里,页面和静态文件并不是很多的情况下,打包后发现产出的静态资源却很大. 1.关掉sourcemap 在config/webpack.config.js文件里,大概30几行的位置添加这样一句 ...

  10. react-native当使用antd-mobile出现View config not found for name div

    1.npm uninstall antd-mobile 2.npm uninstall react 3.npm uninstall react-native 4.npm i   xx@指定版本