- VS Code Version: 1.42.1
- OS Version: Ubuntu 18.04
- Browser Version: chrome Version 74.0.3729.108 (Official Build) (64-bit)
最近在学习前端,那么自然是需要一个好用开发环境,这里用的是vscode,首要的是安装一些好用的插件,多数插件都很容易安装,少数两个有点麻烦,不多说了,上内容。
以下是各个插件:
(一个注意事项是,有些操作需要科学上网。)
Auto Rename Tag
- Extension Version: 0.1.1
这个功能是在你重命名开始标签或结束标签中的任意一个时,会自动重命名另一个。
使用方法,在vscode的扩展商店里搜索Auto Rename Tag,然后安装即可。
Code Runner
- Extension Version: 0.9.16
这个功能是运行代码什么的(似乎html用不上吧[^ _ ^])。
使用方法,在vscode的扩展商店里搜索Code Runner,然后安装即可。
安装后会在编辑区右上角出现一个播放符号,点击即可运行。
open in browser
- Extension Version: 1.2.0
这个功能是把 html 页面在浏览器显示效果。
使用方法,在vscode的扩展商店里搜索 open in browser,然后安装即可。
打开 File > Preference > Setting 搜索 “open in browser”
在Open-in-browser: Default 一栏填上值 “google-chrome” (无引号),
这是你想用 chrome 时的值,用其他浏览器的话自行查找值。
然后在编辑区右击选择 open in default browser 即可在默认浏览器中显示效果。
LiveReload
- Extension Version: 0.2.5 (vscode 端)
- Extension Version: 2.1.0 (chrome 端)
这个安装起来稍有麻烦。
这个功能是浏览器热加载html的预览效果,当html文件被修改并保存后,alt + tab 回到浏览器时浏览器自动完成重新加载显示当前效果。
使用步骤,
- 在 vscode 的扩展商店里搜索 LiveReload,然后安装。
- 在 chrome 的扩展商店搜索 LiveReload,然后安装。
chrome 的扩展 LiveReload 启用然后选择管理扩展, 允许访问所有站点,允许访问文件的资源地址,如下图。
- vscode 的扩展 LiveReload 启用,在 vscode 中 ctrl + shift + p 打开命令窗口,输入 LiveReload ,然后点击相应命令,然后左下角显示 LiveReload 已经启用即可,如下图。
- 似乎 chrome 端的 LiveReload 要监测 vscode 端的 LiveReload 正常启用,它才能正常启用。现在点击 chrome 端的 LiveReload 图标,图标中心的空心圆点变为实心圆点说明成功启用,如下图,一图是空心状态,提示可以访问本站点,二图是实心状态,提示已经连接上 LiveReload 这时候可以正常使用。
- 好了,去测试一下吧。
Color Picker
- Extension Version: 0.4.5
这个安装起来稍有麻烦。
这个功能是提供一个功能强大的调色板,全平台通用,主要有选择颜色,转换颜色两种功能。
使用步骤,
- 在 vscode 的扩展商店里搜索 Color Picker,然后安装,它提供两个命令 pick color 和 convert color。
- 这个扩展的详情里提到了,要使用的话,要安装包含 npm 的 nodejs,并且配置好它们的环境变量,我也不知道为什么需要这俩家伙,似乎是 vscode 本身就需要的额外包。
- 我们可以先测试下 Color Picker 能否使用,ctrl + shift + p 打开命令窗口输入 pick color 确定,然后右下角提示错误,缺少模块 npm 什么的。
- 于是我们开始安装 nodejs 和 npm,网上提供的一个方法是
sudo apt-get install nodejs sudo apt-get install npm nodejs -v //检查 nodejs 安装结果 npm -v //检查 npm 安装结果
ubuntu 的软件包库里似乎默认提供的 6.8 版本的 nodejs 和一个我记不起来版本的 npm,成功安装了,然后使用 Color Picker 时出了问题。
ctrl + shift + p 打开命令窗口输入 pick color 确定,然后右下角提示错误,缺少模块 ansi 什么的。
- 于是我查了查错误,找到了一个帖子,https://github.com/anseki/vscode-color/issues/10 ,原因是 nodejs 和 npm 的版本似乎有问题,这里的解决办法是,
sudo apt-get remove nodejs npm curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs
了解这个命令更多信息参考这个页面,https://github.com/nodesource/distributions/blob/master/README.md
总之这个命令重新安装了 12 版本的 nodejs,并且文中说道 npm 应该是包含在nodejs 中的,所以只需安装这个高版本的 nodejs 即可。
安装完成后,
- nodejs Version: 12.16.1
- npm Version: 6.13.4
然后我愉快的去测试 Color Picker 了,然后又出了问题。
- ctrl + shift + p 打开命令窗口输入 pick color 确定,然后左下角提示,稍等一会等待扩展创建,出现这个提示是正确的,并且建议多等一会,但是我这里然后就没有然后了,等了很久并没有什么变化。
相关项目的 issue 中有网友提到了这个问题,不过并没有找到明显的解决办法,原因可能是CC防火墙的问题,首次使用建立这个插件时可能要下载一些包,并且通过科学上网似乎也没有什么帮助,没能解决。不过我重新读了读 Coloe Picker 的详情,它提到了 Chian 用户的 npm 方面的一些问题。- Color Picker 的详情中提到 Chian 用户可能要用 cnpm 代替 npm 什么的,不过由于我们的 npm 已经安装好,所以我们接着用正统的 npm,但是它的操作我们可以借鉴下,如下图。
命令如下,cd ~/.vscode/extensions/anseki.vscode-color-x.x.x // The x.x.x above is a version of the extension. npm install
然后在 npm install 命令执行的过程中又出现了错误,如下图,
electron-v0.37.3-linux-x64.zip 这个文件完全下不下来,科学上网经测试似乎也没有效果,这正印证了之前长时间等待插件建立但是没有结果的情况,那我们就只有手动下载了。
electron 项目的发行页面 https://github.com/electron/electron/releases
从这里找到指定的文件,然后下载下来,然后放到指定目录。mv electron-v0.37.3-linux-x64.zip ~/.electron/
然后我们重新运行这个命令,
cd ~/.vscode/extensions/anseki.vscode-color-x.x.x // The x.x.x above is a version of the extension. npm install
这次结果理想,成功执行了命令,如下图,
8. 现在我们回到 vscode, ctrl + shift + p 打开命令窗口输入 pick color 确定,可能出现几个问题,
错误一:右下角提示错误,…/path.txt 缺失什么的,具体错误记不清了,这个问题是插件文件错误,把这个插件卸载,重启 vscode ,再安装这个这个插件即可解决。然后重新执行步骤7,然后重新执行步骤8。
错误二:右下角提示,插件的硬盘文件被修改什么的,要求重新加载,点击重新加载即可,加载完成后重新执行步骤8。
如果没有错误,那么应该就搞定了,效果如下图,
9. [^ _ ^] 好了。
莓有了。