VSCode安装使用及插件选择

https://code.visualstudio.com/

1. 插件安装

1. Chinese(Simplified)：Language Pack for Visual Studio Code

   简体中文

2. Atom One Dark Theme

   黑色主题

3. VSCode Great Icons

   文件夹图标

4. open in browser

   直接打开浏览器插件

5. Live Server

   本地模拟服务器，会自动保存修改的代码，重新运行服务

6. CSS Peek

   追踪至样式

7. EditorConfig for VS Code

   有助于为不同IDE编译器，不同操作系统上处理同一项目的多个开发人员维护一致的编码风格

8. Auto Rename Tag

   自动命名配对的HTML/XML标签

9. VS Code JS, CSS, HTML Formatting

   自动格式化js css html标签

10. Vue VSCode Snippets

11. Prettier - Code formatter

    代码格式化工具

12. Path Intellisense

13. cssrem

    • px到rem，px到vw的转换

14. ES7+ React/Redux/React-Native snippets

    • react开发

2. VSCode的配置

【command+,】打开设置面板

• Auto Save 自动保存

  

• Font Size 修改代码字体大小

  

• Word Wrap 代码自动换行

  

• Render Whitespace 空格的渲染方式

  

• Tab Size 代码缩进

  • 推荐2个空格(公司开发项目基本都是2个空格)

    

  • 确保Detect Indentation没有勾选

    

3. VSCode基本快捷键

快捷键	备注
!+tab	快速生成html骨架
alt+b	跳转到浏览器中查看网页效果
command+s	保存文件
command+/	添加注释
command+d	选中相同的所有内容
command+,	打开设置面板
alt+shift+向下箭头	复制上一行
vbase-3-ts	快速创建vue3项目
emmet语法	🔗