前端入职要做的几件事

很皮的程序员
5,095 阅读6分钟

时间过得真快,不知不觉中又过了一年。对于才从事前端行业的同学来说，进新公司第一步就得搭好一个便于开发的环境。（仅介绍window系统的,毕竟我的mac还在厂家嗷嗷待哺呢。） 作为一名前端从业者，入职一家公司首先要做的一下几件事：

1.开发环境安装及配置

（1）：node安装

安装node建议使用 nvm，nvm便于集中管理node版本,安装过程省略。不知道如何安装点这 nvm安装与使用

1、查看本地安装的node所有版本；有可选参数available，显示所有可下载的版本。

nvm list [available]

2、安装，命令中的版本号可自定义，具体参考命令1查询出来的列表

nvm install 11.13.0

3、使用特定版本

nvm use 11.13.0

4、卸载

nvm uninstall 11.13.0
推荐几个常用的包管理工具
  • cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • yarn 1)、安装
npm i -g -yarn

2)、测试是否安装成功

yarn --vresion

3)、安装依赖

yarn global add @vue/cli

（2）：git安装

官网安装包下载地址
国内访问官网较慢可以使用 国内的镜像下载地址 相关配置,及安装过程可以在 菜鸟教程 Git安装配置中查看

（3）：vscode安装

vsCode是目前大多数前端从业者的喜爱的开发工具 vscode下载地址 ,这里我简单讲讲我在开发中常用的几个插件

  • Chinese (Simplified) Language Pack for Visual Studio Code

    中文（简体）语言包为 VS Code 提供本地化界面。

  • Auto Close Tag

    自动添加HTML/XML关闭标记，与Visual Studio IDE或Sublime Text一样。

  • Auto Rename Tag

    自动重命名配对的HTML/XML标记，与Visual Studio IDE一样。

  • Beautify

    美化你的代码,代码书写更显眼,层级区分更明细

  • Bracket Pair Colorizer

    这个扩展允许匹配括号与颜色识别。用户可以定义要匹配的字符和要使用的颜色。

  • ESLint

    扩展使用安装在打开的工作区文件夹中的ESLint库,

  • GitLens — Git supercharged

    git多人协作的时候需要查看日志，如果能在当前代码中查看到那是很方便的一件事，能省去很多时间去其他工具查看，提高工作效率。

（4）：安装Sourcetree

Sourcetree简化了如何与Git存储库进行交互，这样您就可以集中精力编写代码。通过Sourcetree的简单Git GUI可视化和管理存储库。官网下载地址

配置过程省略，如果有不会的同学 推荐一个网址 Sourcetree安装与配置 , 该文章也介绍了如何配置ssh keys以及Sourcetree该如何使用

（5）: Google Chrome 插件推荐

作为一名前端从业者,好的辅助工具是必不可少的，众所周知 Chrome 是最喜欢咱们前端的同学了。

先来说说 Chrome 的优点
1）浏览器简洁性能高。
2）支持HTML5更全面以及浏览器兼容问题少
3）chrome的插件系统很强大，如果不了解就体验不到chrome的最爽的地方,各种辅助工具、屏蔽广告、开发工具等等

推荐几个常用的插件
  • 谷歌访问助手


一个便于获取新神器的帮手

  • Axure RP Extension for Chrome


一个不错的插件,查看产品原型图更加方便

  • FeHelper(前端助手)


JSON自动格式化、手动格式化，支持排序、解码、下载等，更多功能可在配置页按需安装

  • React Developer Tools


对于react开发人员是一个不错的辅助工具

  • Vue.js devtools


对从事vue开发的同学来说是一个不错的选择

  • 掘金


无聊时网上冲浪,看看前沿新技术,学习新知识也是不错的选择

  • 沙拉查词-聚合词典划词翻译


沙拉查词是一款专业划词翻译扩展，为交叉阅读而生。大量权威词典涵盖中英日韩法德西语，支持复杂的划词操作、网页翻译、生词本与 PDF 浏览。简单来说就是英语小白的神奇助手

2.查看公司规范

对于才入职的同学来说，想要快速融入集体，首先就的了解公司的相关规范，例如代码书写规范，UED规范等等

前端开发规范

不同公司都有不同的规范，这里就不细说了，入职注意对以下几个规范的了解能更好的提升开发速率，提高代码质量。

  1. HTML规范
  2. CSS规范
  3. js代码规范
  4. Eslint规范
  5. commit规范

UED样式规范

这里要特别强调对UED规范的了解，前端和UED的矛盾是比较突出的。往往一些项目有产品原型图，没有UED设计稿，前端同学在不清楚UED相关规范的情况下，就凭感觉的进行页面开发。一到验收提测阶段，UED同学就会提出各种样式问题，不对你的项目进行验收，项目无法进入下一个流程，导致整个项目延期。

前端同学为了避免不必要的麻烦。入职后得先了解各个项目的UED规范，这样在没有UI设计稿进行项目开发的时候才能避免一些不必要的问题。

3.拉取代码从项目中剖析问题

还是那句话“书读百遍其义自见”，在没有进行项目开发的时候，拉取已有代码，在代码中学习，同时也可以看看其他同学的书写习惯，从中汲取有用的东西来丰富自己，在自己接手项目时能从容应对

4.认真对待

从事-行爱一行, 既然加入了这个团队就得对整个团队负责。 在这里我想说的就是认真对待每一个问题，有错就改，犯错不可怕可怕的是犯了错却选择逃避。

  • 每一个项目认真对待，注重代码质量。
  • 融入团队才能配合的更好。
  • 发散思维，一个问题可能有不同的解决方案，过程可能会消耗很多时间，但找到一个最佳解题思路会让你在今后遇到相同问题能更快且高效处理
  • 前端在不断发展，自己也得不断学习

加油班前端的小伙伴们，为了钱，也为了美好明天。拼搏到无能为力

avatar
文章
阅读
粉丝