使用VScode开发Angular

简介: 使用VScode开发Angular

前言


Visual Studio Code(简称VS Code)是一个由微软开发,同时支持Windows、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器,它支持测试,并内置了 Git  版本控制功能,同时也具有开发环境功能,例如代码补全(类似于 IntelliSense)、代码片段和代码重构等。该编辑器支持用户个性化配置,例如改变主题颜色、键盘快捷方式等各种属性和参数,同时还在编辑器中内置了扩展程序管理的功能。


Java 开发习惯使用 IDEA,前期我也是继续使用 IDEA 来开发 Angular,不过编写 Html 时,对于代码的提示不够智能。虽然  webstorm 和 IDEA 很相似,但是 VsCode 比  webstorm 更轻量级,所以就转而使用 VsCode。


以下内容记录除此使用 VsCode 的过程,包括


主题


作为一个非前端开发人员,觉得 Atom One Dark Theme 这个主题界面确实不错,网上风评也不错,深受前端大佬们的喜爱。


1、点击扩展商店搜索你要找的插件名称如Atom One Dark Theme,点击安装。


image.png


2、使用刚才下载的主题


image.pngimage.png


最后的效果图如下所示:


11.jpg


再推荐一款主题: VSCode simpler Icons with Angular ,效果如下:


12.jpg


插件


由于工作需要,在网上搜索了前端大佬推荐的插件,大致如下:


  • Auto Close Tag:匹配标签,关闭对应的标签。对于HTML/XML很实用。
  • Auto Rename Tag:改变标签的时候同时改动开闭合标签;对于HTML/XML很实用。
  • HTML CSS Support: 这个也是HTML必备插件之一。
  • HTML Snippets : 提供对HTML语言的支持
  • CSS Peek:html和css中关联css的跳转
  • Code Runner:代码编译运行看结果,支持众多语言
  • Git History:查看git分支提交日志的插件
  • Git History Diff :寻找每一个git分支上面提交过的节点,并可以对比差异性。
  • Path Autocomplete :路径智能补全插件。
  • Path Intellisense : 路径智能提示插件。
  • beautify : 良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用;但是react工程的jsx文件用beautify插件格式化会乱掉,建议不要用
  • Chinese (Simplified) Language Pack for Visual Studio Code :  适用于 VS Code 的中文(简体)语言包。
  • fileheader :新建文件作者注释


接下来是适用 Angular 开发的插件:


Debugger for Chrome :  只需要在代码编辑器中设置断点,在浏览器中会在断点处暂停  

npm Intellisense: 支持在代码中导入npm模块(require方法)时的自动补全

Angular Extension pack: 集成了很多提升Angular开发效率的插件

TSLint:TS语法检测

其次习惯了 IDEA 的快捷键,这里也可以安装相关插件。

IntelliJ IDEA Keybindings:IDEA风格的快捷键


快捷键


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


13.jpg


由于在上一步骤安装了 IDEA 风格快捷键的插件,所以使用起来都很顺手,不过还是有个别快捷键需要调整一下。


我们可以自定义快捷键,在keybindings.json里面设置覆盖即可。该文件具体路径位于:


C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
复制代码

14.jpg


不过关于 command 属性的值需要确认好再去修改。

在 VsCode 中全局命令使用  ctrl+shift+p 快捷键 ,如下图所示:


image.png


以下内容按照个人使用习惯来配置:


Ctrl+Y :删除当前行,还有个类似的快捷键   Ctrl+X ,不过后者无法一次性删除多行,个人习惯使用  Ctrl+D来删除。

Ctrl+D :复制行,个人习惯使用 Ctrl+Alt+Down

Alt+逗号:移动到当前代码首部。

Alt+句号:移动到当前代码尾部。


关于后面两个快捷键,如果感兴趣的朋友可以按照自己的习惯进行配置,不一定非要使用 Home/End 按键来实现。具体配置过程如下图所示:


11.jpg


问题记录


Vs Code打开新的文件会覆盖窗口中的,怎么改

这是因为你单击文件名的缘故,这个是“预览模式”,所以再单击其他文件时,会覆盖当前打开的文件。
复制代码


如果你要每次都打开新tab,那就双击文件名好了。这个逻辑和sublime是一样的。


补充:


预览模式是现在各类编辑器的默认功能,如果你实在不喜欢,可以关掉的,看下面:

ctrl+shift+p,在搜索框中输入 Settings,如下所示:


image.png


给你配置settings.json里加一条:


// 控制打开的编辑器是否为预览编辑器。预览编辑器在被固定 (例如,通过双击或编辑) 前可重用,其字体样式为斜体。
"workbench.editor.enablePreview": true,
改为
"workbench.editor.enablePreview": false,
复制代码


文件夹按照层级结构显示


左下角点击设置,在搜索框输入:compact,取消勾选即可。


image.png


如何快速打开项目



进入到项目目录下,然后 Shift+鼠标右键打开命令行窗口,输入 code+空格+. 即可。



目录
相关文章
|
15天前
|
网络安全 Docker 容器
VScode远程服务器之远程 远程容器 进行开发(五)
VScode远程服务器之远程 远程容器 进行开发(五)
18 1
|
15天前
|
IDE 开发工具
Vscode的远程开发之VScode优势(一)
Vscode的远程开发之VScode优势(一)
17 1
|
12天前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
31 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
15天前
|
Kubernetes 网络安全 容器
VScode远程服务器进行开发(三)
VScode远程服务器进行开发(三)
20 0
|
15天前
|
Linux 网络安全 Windows
VScode远程开发之remote 远程开发(二)
VScode远程开发之remote 远程开发(二)
14 0
|
2月前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
|
2月前
开发小技巧vscode
开发小技巧vscode
38 2
|
3月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
40 0
|
3月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
63 0