开发环境用的是visual studio code，拥有非常强大的插件系统。地址。下载好后就开始装插件吧。
第一步，打开vsual studio code。
第二步，点击图示位置
插件安装
1. eslint
js静态分析器，可以解决：
- 变量名写错了，但是没有报错。
- 自己不想写分号，让它自动加
- 强制要求格式的规范
需要配置
- eslint.autoFixOnSave
- eslint.packageManager
第一个设置是可以在每次保存的时候，自动修复一些能自动修复的错误，比如少了冒号，缩进不对等等… 注意 VSCode 的设置不能直接修改，需要复制到右边的用户设置区，来修改。通过点击左侧的那个 edit 图标就能复制到右侧，接着修改后再保存就能生效。
第二个是包管理工具
2.typescript
微软开发的一个 JS 超集，安装它的目的主要是它能够为 VS Code 赋予更强的能力，让开发更爽
Code Runner
调用的系统的二进制文件，来直接运行代码，类似于 IDE 中的编译运行。不过在真正使用之前还需要稍微配置一下，在用户设置中搜索，code-runner，可以看到搜索出来的结果。
- clearPreviousOutPut
- runInTerminal
- saveFileBeforeRun or saveAllFilesBeforeRun
第一个的意思就是每次运行会清除之前的输入。
第二个就是在自己系统的终端中运行。
第三个的意思是，运行之前保存当前文件和运行之前保存所有文件。
Prettier
格式化工具，支持js， HTML，CSS，JSON，Markdown ，需要设置
- editor.foramtOnPaste
- editor.formatOnSave
- editor.formatOnType
Bracket Pair Colorizer
括号会变成花色。
花色括号
Auto Close Tag
自动帮你填充对应的 Tag
Auto Rename Tag
自动帮你改对应的 tag
HTML CSS Support
创建 .css 文件强大的自动补全特性
Settings Sync
同步你在 VSCode 中的所有设置和下载过的插件，Snippet，快捷键绑定。
Path Intellisense
提供 URL 的自动补全功能
CSS Peak
在我们看到 HTML 或者 JSX 等代码中，如果出现了 class/className 的话，可以通过 Cmd/Ctrl ➕ 左键点击某个 class 直接跳转到对应 CSS 的定义。
Live Server
它提供了自动保存文件后自动刷新的功能。
IntelliSense
一个非常有用的语法高亮和自动完成功能，提供了基于变量类型、函数定义和导入模块的自动补全功能。
JavaScript (ES6) Code Snippets
Wallaby.js
一个高级的连续测试运行器，当您对您正在工作的文件进行测试时，它会在你的编辑器中创建通过测试或测试失败的视觉反馈
npm Intellisense
VS Code 扩展，在 import 导入语句中自动完成npm 模块。
vscode-icons
可以更换侧边栏中漂亮的图标。
总结
作为web初学者，vsual studio code强大的扩展对我真的很有帮助。
文档
网友评论