前端开发常用工具介绍
- sublime text:收费的代码编辑器 ,打开速度快,效率高
- Visual Studio Code(vs code):微软开发的免费编辑器,集成终端效果好!
- atom:github发布的代码编辑器
- webstorm:誉为
web前端开发神器
, 但是 合成的插件和配置太多,导致开启速度慢 , 适合初学者!- 如果安装,安装 11 版本,不要下载最新的,部分电脑系统兼容问题很大!
- HBuilder:国产的web开发工具
vscode的基本配置
1. 点击右下角小齿轮(设置按钮)(或者快捷键ctrl + shift + p),选择命令面板
2. 搜索snippets
3. 搜索javascript 找到 javascript.json
将下面的内容复制粘贴,覆盖掉默认设置就可以了
// 将设置放入此文件中以覆盖默认设置
{
//自动保存
"files.autoSave": "afterDelay",
// 以像素为单位控制字号。
"editor.fontSize": 18,
//一个制表符等于的空格数
"editor.tabSize": 2,
// 自动更新扩展
"extensions.autoUpdate": false,
//关掉自动更新
"update.channel": "none",
// 通过使用 tab 键 补全代码
"emmet.triggerExpansionOnTab": true,
"window.zoomLevel": 1,
"vsicons.dontShowNewVersionMessage": true,
"workbench.startupEditor": "newUntitledFile",
"workbench.sideBar.location": "right",
"explorer.confirmDelete": false
}
常用插件
1. open in browser
打开默认浏览器 快捷键: alt+b
也可以在右击鼠标,选择 Open In Default Brower
2.Path intellisense 自动提示路径
3.Auto Close Tag :
匹配标签,关闭对应的标签。很实用【HTML/XML】
4.Auto Rename Tag
修改 html 标签,自动帮你完成尾部闭合标签的同步修改
5.HTML Snippets:
超级实用且初级的 H5代码片段以及提示
6.HTMLHint:
html代码检测
7.HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式。新版已经支持scss文件检索,这个也是必备插件之一
8.Path Autocomplete
路径智能补全
9.JavaScript Snippet Pack
针对js的插件,包含了js的常用语法关键字,很实用;
10.Class autocomplete for HTML
编写html代码的朋友们对html代码的一大体现就是重复,如果纯用手敲不仅累还会影响项目进度,这款自动补全插件真的很棒;
10.beautify
格式化代码的工具,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用
11.jQuery Code Snippets:
jquery 重度患者必须品
12.vscode-icon:
让 vscode 资源树目录加上图标,必备良品!
13.VSCode Great Icons:
另一款资源树目录图标
14.colorize :
会给颜色代码增加一个当前匹配代码颜色的背景,非常好
15.Color Info:
提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。
16.Bracket Pair Colorizer:
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
17.vscode-fileheader:
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
18.Document This :
js 的注释模板 (注意:新版的vscode已经原生支持,在function上输入/** tab)
19.filesize:
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
20.Code Runner :
代码编译运行看结果,支持众多语言
21.Bootstrap 3 Sinnpet:
常用 bootstrap 的可以下
22.GitLens:
丰富的git日志插件
23.VueHelper:
vue代码提示
24.Bookmarks:
一个书签工具,还是很有必要的
25.Prettier 代码自动化格式化
26.cssrem
将rem自动换算城rem,注意默认的font-size为16px; 需要根据设计图自己去修改配置