ubuntu 环境下 vscode 前端开发环境插件配置 Color Picker 配置

• 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 回到浏览器时浏览器自动完成重新加载显示当前效果。
使用步骤，

1. 在 vscode 的扩展商店里搜索 LiveReload，然后安装。
2. 在 chrome 的扩展商店搜索 LiveReload，然后安装。
   chrome 的扩展 LiveReload 启用然后选择管理扩展， 允许访问所有站点，允许访问文件的资源地址，如下图。
   
3. vscode 的扩展 LiveReload 启用，在 vscode 中 ctrl + shift + p 打开命令窗口，输入 LiveReload ，然后点击相应命令，然后左下角显示 LiveReload 已经启用即可，如下图。
   
   
4. 似乎 chrome 端的 LiveReload 要监测 vscode 端的 LiveReload 正常启用，它才能正常启用。现在点击 chrome 端的 LiveReload 图标，图标中心的空心圆点变为实心圆点说明成功启用，如下图，一图是空心状态，提示可以访问本站点，二图是实心状态，提示已经连接上 LiveReload 这时候可以正常使用。
   
   
5. 好了，去测试一下吧。

Color Picker

• Extension Version: 0.4.5

这个安装起来稍有麻烦。

这个功能是提供一个功能强大的调色板，全平台通用，主要有选择颜色，转换颜色两种功能。
使用步骤，

1. 在 vscode 的扩展商店里搜索 Color Picker，然后安装，它提供两个命令 pick color 和 convert color。
2. 这个扩展的详情里提到了，要使用的话，要安装包含 npm 的 nodejs，并且配置好它们的环境变量，我也不知道为什么需要这俩家伙，似乎是 vscode 本身就需要的额外包。
3. 我们可以先测试下 Color Picker 能否使用，ctrl + shift + p 打开命令窗口输入 pick color 确定，然后右下角提示错误，缺少模块 npm 什么的。
4. 于是我们开始安装 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 什么的。

5. 于是我查了查错误，找到了一个帖子，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 了，然后又出了问题。

6. ctrl + shift + p 打开命令窗口输入 pick color 确定，然后左下角提示，稍等一会等待扩展创建，出现这个提示是正确的，并且建议多等一会，但是我这里然后就没有然后了，等了很久并没有什么变化。
   相关项目的 issue 中有网友提到了这个问题，不过并没有找到明显的解决办法，原因可能是CC防火墙的问题，首次使用建立这个插件时可能要下载一些包，并且通过*似乎也没有什么帮助，没能解决。不过我重新读了读 Coloe Picker 的详情，它提到了 Chian 用户的 npm 方面的一些问题。
7. 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. [^ _ ^] 好了。

莓有了。