Sublime Text3 搭建前端开发环境

时间:2022-04-02 13:22:44

第一步:百度搜索sublime text3 ,直接点击红色箭头下方的下载地址,下载完成安装后会提示是否更新,直接点击更新就好了!

Sublime Text3 搭建前端开发环境

第二步:下载插件管理器,点击菜单栏Tools->Package Control,安装完后有提示就说明安装完成!

第三步:安装插件,按下Ctrl+Shift+P调出命令面板,输入install 调出 Install Package 选项并回车。

Sublime Text3 搭建前端开发环境

回车后下方状态栏提示:

Sublime Text3 搭建前端开发环境

等待一会出现以下搜索栏:

Sublime Text3 搭建前端开发环境

 在搜索栏中输入插件名:Emmet,然后回车,下载完会新建一个成功的页面。

Emmet(代码提示插件html/css)一种快速编写html/css的方法,使用方法:(tab快捷键)

接下来按照上面的方法安装一些常用的插件

1、SublimeCodeIntel(作为一个代码提示和补全插件)

2、SublimeLinter (代码检查插件)

3、ColorPicker(调色板(需要输入颜色时,可直接选取颜色))

4、AutoFileName(自动完成文件名的输入,如图片选取,快捷输入文件名路径补全)

5、ChineseLocalzations (菜单汉化)

本人暂时安装了这些,有其他需要的可百度一下。

第四步:设置快捷键打开浏览器预览

点击菜单栏Preferences->Key Bindings

Sublime Text3 搭建前端开发环境

在这里面添加一下代码:

//chorme
{
"keys": ["f12"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
"extensions": ".*"
}
}

特殊说明:

Sublime Text3 搭建前端开发环境

从谷歌浏览器属性这里的地址是需要加多一个\

"keys": ["f12"], 这个是快捷键的设置,保存就好啦!