搭建开发环境

Rinsann 2021年07月31日 474次浏览

多写博客!

第一步先进行FQ

安装Chrome开全局FQ google搜索Chrome安装,安装过程中保持全局模式

扩展程序安装中Proxy SwitchyOmega插件

开启插件自动切换(关掉全局FQ)

安装uBlock屏蔽广告

理解无痕窗口(关闭后浏览记录、cookie全都会清理掉测试时可用)

Google翻译中文有bug,看代码时不要使用

Chrome开发者工具

开发者工具可切换主题,大面板可以移动位置,小面板也可以,按ESC可以新建控制台。

Sources面板可以保存代码片段(点击箭头 --> Snippets)

Network关闭Use large request rows 和 Show overview 添加Method,Network测试断网和慢网速以及理解Preserve log、Disable cache

Chrome快捷键

鼠标中键单击--打开或关闭

ctrl+T --新建标签页

ctrl + shift + T--撤销关闭

ctrl + 点击 --在新标签打开

ctrl + w --关闭当前标签

ctrl + R -- 刷新

ctrl + L --输入网址

ctrl + shift + i 或F12 --打开开发者工具

alt + 左右 --前进后退

alt + 回车 --在新标签页打开(结合ctrl + L --输入网址使用)

shift + 回车 --在新窗口打开

安装VSCode

安装Chinese汉化插件,重启VSCode

自动保存Auto Save: onFocusChange

自动格式化Format On Save

注意自动格式化可能会影响对别的代码产生影响(部分代码是别人写的,格式化之后可能出错)

开启Trigger Expansion On Tab (可能会让tab无法打字)

可选配置:

面板靠右(查看--外观--向右移动侧边栏)、隐藏菜单栏使用alt展示菜单栏,首选项-设置里面可以搜索。

字体设置为 "editor.codeLensFontFamily": "Fira Code, Consolas, 'Courier New', monospace",启用字体连字("editor.fontLigatures": true,)

安装插件:Code Spell Checker 检查单词拼写错误、Git Easy

VSCode 必会

功能:

开启终端(ctrl+shift+`)、开启第二终端

搜索文件夹(ctrl + shift + f )、搜索当前文件夹、搜索选中区域

设置语法、选择语言模式(纯文本语法无高亮)

Emmet快捷写代码(ctrl + shift + p)

Git操作

调试JavaScript、TypeScript

快捷键:

ctrl+ p -- 查找文件

ctrl + shift + p --输入Emmet命令

alt + 单击 --多位置输入

关于工具,能用就行。

安装Cmder

特点:

一个控制台软件,内嵌Git Bash 也支持CMD 和 PowerShell,支持一键呼出,支持分屏

安装好了之后不要再安装Git Bash 了会重合。

Settings -- Interface language中选择中文 -- 然后点击导出选择ConEmu.xml文件打开--搜索language 确认是 "zh" --保存文件后在返回--保存Cmder设置

快捷键 ctrl + T 新建标签 ctrl + D 关闭当前标签

可设置快捷键 Settings -- 按键& 宏 -- 搜索分屏 选择想要的分屏样式 -- 在Choose hotkey栏设置快捷键

将cmder添加到右键菜单

将下载好的cmder.zip文件放到D盘并解压,然后记住文件所在的位置,我的文件解压到E:\software\cmder,然后复制路径,右键点击我的电脑--属性--高级系统设置--环境变量--系统变量,**点击新建,变量名设置为:**CMDER_HOME,变量值直接粘贴刚才拷贝的地址,然后点击系统变量中的path,点击新建,输入%CMDER_HOME%,至此,环境变量配置完成,一路点击确定关闭即可。

第二步添加 cmder 到右键菜单:环境变量添加后,在任意文件夹中即可打开Cmder,上一步的把 Cmder 加到环境变量就是为此服务的, win10系统下右键点击开始(屏幕左下角的图标“田”),选择**Windows PowerShell(管理员),**在管理员权限的终端输入以下语句即可:

Cmder.exe /REGISTER ALL

到此,即可将cmder添加至右键菜单!

安装Node.js

从官网安装,安装时选择双数版 Node8 、 Node 10 、Node 12 属于稳定版。

安装之后就有了node 命令(添加了PATH)、npm命令、npx命令等

cmder 输入node --version 、 npm --version 、 npx --version 检查没问题就安装成功了。

使用 npm i -g nrm 命令安装nrm,nrm --version确认是否安装成功(建议使用node14版本)

然后使用淘宝的镜像

npm use taobao

npm i -g http-server

全局安装的文件都在 C:\Users\yume\AppData\Roaming\npm\http-server 中。

which http-server

安装yarn(用于代替yarn)

yarn比较稳定不容易出错。去官网下载。

不使用 npm install -g yarn 安装 yarn !!!

如果已经使用 npm install -g yarn 安装了 yarn,那么使用 npm uninstall -g yarn 命令卸载 yarn

Windows 安装 yarn 1.x

官网给出的步骤如下:

  1. 进入官网下载安装包:https://classic.yarnpkg.com/en/docs/install#windows-stable
  2. 下载完后,解压,双击 msi 文件安装,安装在 D:\Software\yarn 最佳
  3. 安装完成后,请重启命令行(退出再打开),此时yarn才可正常使用

Mac 安装 yarn 1.x

  1. 安装 homebrew
  2. brew install yarn
yarn --version

如果npm已经设置了淘宝的镜像源yarn也会使用淘宝的

yarn config list
yarn config v1.22.5
info yarn config
{
  'version-tag-prefix': 'v',
  'version-git-tag': true,
  'version-commit-hooks': true,
  'version-git-sign': false,
  'version-git-message': 'v%s',
  'init-version': '1.0.0',
  'init-license': 'MIT',
  'save-prefix': '^',
  'bin-links': true,
  'ignore-scripts': false,
  'ignore-optional': false,
  registry: 'https://registry.yarnpkg.com',
  'strict-ssl': true,
  'user-agent': 'yarn/1.22.5 npm/? node/v14.17.4 win32 x64'
}
info npm config
{
  home: 'https://npm.taobao.org',
  registry: 'https://registry.npm.taobao.org/'
}
Done in 0.04s.

安装yarn 源管理器 yrm yarn global add yrm 然后在可能还要在设置淘宝yrm use taobao

使用yarn config list 查看registry

命令行中的复制粘贴

在 Mac 的 iTerm2.app 里

  1. 用鼠标选中文字即复制
  2. 点击鼠标中键就是粘贴

在 Windows 的 cmder 里

  1. 用鼠标选中文字即自动复制
  2. 单击鼠标右键就是粘贴
  3. Shift + Insert 也是粘贴

在 Windows 的 Git Bash 里

  1. 用鼠标选中文字,然后右键 copy 就是复制
  2. 用鼠标选中文字,然后按 ctrl + insert 也是复制
  3. 点击鼠标中键就是粘贴
  4. Shift + Insert 也是粘贴

VSCode 中使用Cmder 的终端s

ctrl + shift + p 搜索 Settings json文件(不是默认的json)

[https://github.com/cmderdev/cmder/wiki/Seamless-VS-Code-Integration#use-cmder-embedded-git-in-vscode]:

将以下代码插入进去并保存([cmder_root]替换成cmder根目录双斜杠):

"git.enabled": true,
"git.path": "[cmder_root]\\vendor\\git-for-windows\\cmd\\git.exe",
"terminal.integrated.shell.windows": "[cmder_root]\\vendor\\git-for-windows\\bin\\bash.exe",