前端配置环境

在正式入职或者在日常重装系统以后，如果公司给配置了新的电脑。都需要对开发环境重新搭建，搭建环境的过程是非常痛苦的，因为不知道哪些东西需要是必须安装，必须配置的，也会造成一些插件或者包的遗漏安装，这也成为很多新手程序员的烦恼。下面给提供一份开发环境的基础配置清单，这份清单中囊括了笔者在面试新电脑时基础的配置，你可以在这份清单中继续添加日常开发中安装的一些插件、工具等，这样在以后面对新电脑，就可以按照清单进行配置。

Chrome 配置

首先,身为一名前端程序员,陪伴我们最多的浏览器就是谷歌浏览器了

chrome 下载地址https://www.google.cn/chrome/

安装方式下一步下一步(这就不用我来展示了吧)

然后打开设置

把默认搜索引擎 和 主页 都改成百度  还有默认浏览器也设置为谷歌浏览器

 

 

Vscode 下载安装以及常用的插件

Vscode 下载地址https://code.visualstudio.com/

 1.中文语言插件

 

1. 搜索chinese
2. 找到对应图片内的插件 下载 启用

 

 2.主题插件

一个良好的主题 可以提高工作效率 这里推荐 Atom 主题插件 当然 你也可以 用其他的 

one dark 也是一款不错的插件 这里不做过多展示

 

 3. 文件图标主题

搜索 icon  找到自己喜欢的 文件图标主题 然后安装启用即可

4.源代码管理插件GitLens

在多人协作开发过程中，能够看到开发的日志，提高开发效率

搜索GitLens 

5.Live Server 

可以创建本地服务器 可以实时浏览 刷新

 

 使用方法 可以右键 

亦可以 ALT+L+O  直接打开网页

6.Prettier - Code formatter

帮助开发者格式化代码，并提供颜色关键字以使代码更具可读性

 7. EsLint

ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具 

 

 值得注意的是 eslint 有需要写到settings.json配置的东西

{ 
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".jsx",
      ".tsx"
    ]
  },
  "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
  }

出现黄色波浪线 不妨碍 正常使用 如果有强迫症,就对一下前面 把重复项删除即可

8.  Simple React Snippets与JS JSX Snippets

如果需要react开发 那么就下载吧

 

 

 

 9.Vetur 与Vue调试工具谷歌插件Vue Devtools

Vue前端开发利器

 

Vue Devtools

 链接：https://pan.baidu.com/s/1onWUQ1uBi_-UPI-NkZfYBQ 
提取码：1oia 
复制这段内容后打开百度网盘手机App，操作更方便哦

如果连接过期 请私信我 我会及时更新

10.设置 注释、变量等颜色

在setting.json文件内书写以下内容

"editor.tokenColorCustomizations": {
    "comments": {
        // 设置字体样式 加粗 下划线 斜体等
        "fontStyle": "",
        // 设置字体颜色
        "foreground": "#4CAEE2"
    }, // 注释
    "keywords": "#0a0", // 关键字
    "variables": "#f00", // 变量名
    "strings": "#e2d75dbd", // 字符串
    "functions": "#5b99fcc9", // 函数名
    "numbers": "#AE81FF" // 数字

Git 下载安装以及配置

Git 下载地址https://git-scm.com/

 配置好全局配置 

git config --global user.email "你的邮箱"

git config --global user.name "老李头代码"

ssh 配置

1. 在 Git Bash Here 终端中输入 ssh-keygen 后根据提示，按三次回车即可

2. 复制公钥内容

3. // C:\Users\你的电脑用户名\.ssh\id_rsa.pub

4. 拷贝内容，到 github 、码云、gitlab 等托管平台中，找到设置，将拷贝的公钥内容，粘贴即可

Node 以及 npm 的下载设置

Node 下载地址http://nodejs.cn/download/

 node 版本不要低于 10 ，20210519

 cnpm

npm i cnpm -g

# 如果你没有配置淘宝镜像可以参数传入加速

npm install -g cnpm --registry=https://registry.npm.taobao.org

yarn 

 npm i yarn -g

cnpm i yarn -g 

 

nrm 

安装:cnpm install -g nrm

显示 nrm 可用镜像源

-------- https://registry.npmjs.org/

yarn

------- https://registry.yarnpkg.com/

cnpm

------- http://r.cnpmjs.org/

taobao

----- https://registry.npm.taobao.org/

nj

--------- https://registry.nodejitsu.com/

npmMirror

-- https://skimdb.npmjs.com/registry/

edunpm

----- http://registry.enpmjs.org/

 切换镜像源

nrm user xxx

 nodemon

安装

cnpm i nodemon -g

执行 node 脚本

nodemon xxx.js

 脚手架工具的下载

vue-cli 安装

详见官网https://cli.vuejs.org/zh/guide/installation.html%5D

create-app-react 安装 

详见官网https://create-react-app.dev/docs/getting-started/

 postman 安装与下载

下载地址https://www.postman.com/downloads/

安装好以后，进入 postman 界面

 

其他开发者工具安装

1. 微信开发者工具
2. 支付宝开发者工具
3. HBuilder
4. .... 等

根据个人需求下载即可

10. 其他小工具安装

everything

• 基于名称快速定位文件和文件夹

notepad++

• 一个免费的代码编辑器，常用语代码审计与审查

teamviewer

• 或者向日葵
  • 随时随地连接到远程桌面电脑

ToDoList

• 管理、计划和合作任务及项目