当一个前端开发者入职一家公司领取了新电脑后我对电脑都做了些什么？

pe7er
492 阅读17分钟

当入职一家公司领取新电脑时总是令人激动的，下面我讲讲我拿到电脑后都做了些什么？

电脑配置

首先我会先询问电脑配置，能不能达到我的最低要求：

CPU要求最低i5 4c8t，内存条16G，频率不重要，硬盘不能小于256g固态。如果达不到要求，能不能更换内存、固态硬盘。

能不能用自己的电脑？是否需要标准安装公司的定制系统？是否需要安装监控软件？

一般的公司需要安装监控软件，大一些的公司则会对整个系统进行标准安装。

根据实际情况，最终选择合适的电脑，因为电脑配置、屏幕、键盘、桌椅这些硬件配置都会影响到开发效率，甚至心情。程序员写了一辈子代码，就不能享受享受？！！

安装配置环境

git

mac电脑内置了git，可以不用再次安装，当然也可以从官网下载安装。访问git官网下载，git官网还提供了免费的文档Pro git可供下载阅读。

安装完成后在控制台终端输入git -v，可以正常输出版本信息即安装正确。

当git官网无法访问时，可以访问清华大学开源软件镜像站下载

% git -v
git version 2.39.2 (Apple Git-143)

window安装时注意安装步骤时要将git添加到PATH中，否则终端中是是无法使用git命令。

当然也可以手动将git的安装目录添加到PATH中。

当然有些git版本安装后，使用起来特别慢，如果不会配置，则可以简单的通过降低版本安装来解决。

nvm

nvm是node version manager的缩写，是nodejs官网教程推荐的版本控制工具之一，另一个是n，但是我推荐用nvm就够用了。

window下有window版本的nvm：nvm-window可供下载安装，无需代理。

mac版本的安装可能需要代理，就不在这里展开。介绍一个安装教程，无需代理，支持mac和linux安装gitee.com/cunkai/Home…

最近在公司里nodejs官网不知道为了访问不了，但在自己电脑上访问正常，nvm进行安装的时候，也无法从nodejs官网下载安装包。这时候就需要修改nvm的下载源了

修改下载源

找到nvm的安装目录，在目录下打开settings.txt文件，添加或修改node和npm的镜像地址就可以修改nvm的下载地址，当nodejs官网无法访问时，这个能救你于水火中。

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

nrm

nrm是一个管理npm镜像地址的切换，内置了常用的稳定国内镜像，可以添加自己的镜像地址，可以快速切换。

# 全局安装nrm，注意如果使用nvm进行node版本管理，第一次切换到某个node版本，需要安装一次后才可以使用
npm install -g nrm

列出当前已有的镜像

% nrm ls

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

切换镜像

nrm use tencent

添加/移除镜像

# 新建一个镜像地址
nrm add 镜像名称 镜像地址

# 通过镜像名称删除镜像
nrm del 镜像名称

nrm如此优秀，以至于我现在很少用cnpm了。如果不是特别喜欢切换的话，也可以同时使用npm和cnpm来同时用两个npm镜像。

nodejs

打开终端，输入nvm install 16.19.0，版本号支持多种格式16\v16\v16.19.0。

当使用16会安装当前16版本的最后一个版本。

安装完成后，会在用户主目录下.nvm下根据版本号区分版本。具体安装步骤请参考官网

/Users/chenbitao/.nvm/versions/node/v16.19.0/bin/node

这时候使用npm install -g qrcode会把依赖安装在当前版本目录下，如果使用nvm切换了node版本需要重新安装。

# 安装 node 14最后一个版本
nvm install 14
nvm list
# 临时更改当前node版本
nvm use node v14.18.0
# 永久更改当前node版本
nvm alias default v14.18.0

.npmrc

在用户的主目录（用户名文件夹）下有npm的控制文件.npmrc,如果不使用nrm，也可以直接使用这个文件配置镜像地址，它的作用更加丰富，对于electron \ python \ phantomjs等无法通过国内网络下载的依赖，比如我常用的vue-devtools，都是通过配置文件来加速。下面是我常用的配置，经过了几次修改，每次换电脑，一定会把这个文件内容复制到新的电脑上。从此npm安装依赖再无任何网络等待的问题，也无需科学上网。

# 如果公司有私服，将registry注册成公司的私服
registry=https://registry.npm.taobao.org/
home=https://mirrors.cloud.tencent.com/npm/
phantomjs_cdnurl=https://npmmirror.com/dist/phantomjs
chromedriver_cdnurl=https://npmmirror.com/mirrors/chromedriver
sass_binary_site=https://npmmirror.com/mirrors/node-sass
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node
CHROMEDRIVER_CDNURL=https://npmmirror.com/mirrors/chromedriver
OPERADRIVER=https://npmmirror.com/mirrors/operadriver
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
PYTHON_MIRROR=https://npmmirror.com/mirrors/python

Visual Studio Code、IntelliJ IDEA CE、Xcode

安装适合自己的开发者工具，推荐Visual Studio Code、InteliJ IDEA CE(CE表示社区版)。

如果使用mac地址，一定要安装Xcode，因为mac很多工具都依赖xcode提供的组件。

命令行工具

程序员一定有自己合适的shell终端命令行工具，推荐iTern、tabby，它们都是免费且非常好用。

mac自带的终端也非常好用，而且新mac电脑都内置了zsh，使用起来就更加顺手了。

sublime

sublime是我必须安装的文本编辑器，它可以打开各种编码格式的，列编辑等，高性能的满足所有纯文本编辑的需求，使用功能不在这里展开。

postman、apifox

postman、apifox可以方便的对接口进行验证、支持完整的http功能，还支持mock功能。搭配浏览器插件使用，还可以抓取网页请求的全部内容，可以很方便的对接口进行调试。是前后端开发者必备的工具之一！

dash（mac专享）

dash是mac上的API 文档浏览器，支持大部分流行的api，和代码片段。很多时候想翻一个api，就不用去官网上查阅了，一个快捷键就可以快速打开相应的文档，唯一不足的是文档都没有英文，有一定的英文阅读能力推荐使用，

Alfred (mac专享)

alfred是一个类似mac自带的spotlight的高阶版，更多高阶功能需要购买序列号。如果家里富裕，推荐安装购买。

浏览器edge、chrome、firefox

推荐一定要安装Microsoft edge，是chrome的平替，edge还翻译了chrome的文档，可以在edge的帮助中心无障碍的阅读原生的chrome文档。firefox则是最符合w3c规范的浏览器之一，安装一个用来测试非常有必要。

Typora（收费）、MWeb Pro（收费）

Typora、MWeb Pro都支持markdown文档，但是他们都是收费的，但是旧版本的Typora是免费的，区别在于新版的Typora对图片上传支持更加友好。如果需要优秀的md编写体验，它们是不错的选择。

当然也可以使用vscode安装插件来编写md。

有道词典、金山词霸

很多技术工具都没有中文翻译，阅读英语文档也是程序员的家常便饭，推荐有网络用有道词典，无网络用金山词霸离线版。

当然如果有网络，edge内置的翻译也推荐使用，搭配有道词典可以满足英文文档阅读的需求。

redis、resp、Another Redis Desktop Manager

如果你是全栈工程师，redis、mysql、mongodb都是必须要使用的。

redis客户端推荐resp和Another Redis Desktop Manager，它们都是免费开源，且非常好用。

mysql、mysql workbench

mysql客户端我只推荐MySql workbench一个就满足所有需求，其他的都不用安装了。

它是官方免费的。

docker

docker是我必安装的，许多开源工具都有docker支持，当我需要使用nginx、mysql、redis、mongodb等时，可以快速的拉取安装。

xmind

xmind是一个基础功能免费的思维导图，类似的还有processon、draw.io，我在学习的时候都会用它们来组织知识点。

wps/微软offcie套件

必装，不用多言。

charles、whistle

如果是移动端开发，抓包是一个用来调试的重要技能，pc端推荐whistle、charles。ios推荐stream /HTTP Catcher/StormSniffer。 推荐免费的stream，Http Catcher的界面分组更方便。

7z、The Unarchiver

压缩软件mac推荐The Unarchiver、自带的zip，window推荐7z。

PDManer

PDManer是一款免费开源的元数建模软件，支持多平台，如果是全栈工程师，推荐安装使用。

brew（mac专享）

brew是mac上必备的软件包管理工具，git、mysql、node几乎所有流行的软件，都可以通过brew来安装管理，window上有类似的scoop可以使用。

国内安装homebrewHomebrewCN

环境变量配置

老版本的mac在用户的主目录下有.profile文件配置环境变量，如果是新版本，或者主动即成了zhs，则在.zhsrc中配置环境变量。

很多软件会自动往里面添加环境变量，但是大部分都需要手动去配置。

下面是我电脑的配置，有部分是带有安装程序的应用自动添加的，一部分是自己添加的，当你开始认真管理你的profile后，你会很清楚这些的意义时什么，它们都是干什么的？

# 配置brew镜像地址
export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git"
export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git"

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/Developer/flutter/bin:$PATH

# >>> conda initialize >>>
# !! Contents within this block are managed by 'conda init' !!
__conda_setup="$('/opt/anaconda3/bin/conda' 'shell.zsh' 'hook' 2> /dev/null)"
if [ $? -eq 0 ]; then
    eval "$__conda_setup"
else
    if [ -f "/opt/anaconda3/etc/profile.d/conda.sh" ]; then
        . "/opt/anaconda3/etc/profile.d/conda.sh"
    else
        export PATH="/opt/anaconda3/bin:$PATH"
    fi
fi
unset __conda_setup
# <<< conda initialize <<<

#export JAVA_8_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_202.jdk/Contents/Home
export JAVA_8_HOME=$(/usr/libexec/java_home -v1.8)
export JAVA_11_HOME=/Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home
export JAVA_17_HOME=/Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home
export JAVA_18_HOME=/Library/Java/JavaVirtualMachines/jdk-18.0.2.jdk/Contents/Home
export JAVA_20_HOME=/Library/Java/JavaVirtualMachines/jdk-20.jdk/Contents/Home

alias java8='export JAVA_HOME=$JAVA_8_HOME'
alias java11='export JAVA_HOME=$JAVA_11_HOME'
alias java17='export JAVA_HOME=$JAVA_17_HOME'
alias java18='export JAVA_HOME=$JAVA_18_HOME'
alias java20='export JAVA_HOME=$JAVA_20_HOME'

# default to Java
java11

export ADB_HOME=/Users/chenbitao/Library/Android/sdk/platform-tools
export PATH=${ADB_HOME}:$PATH

export MAVEN_HOME=/Users/chenbitao/Developer/apache-maven-3.8.6
export PATH=${MAVEN_HOME}/bin:$PATH

# HBuidler cli
export HX_HOME=/Applications/HBuilderX.app/Contents/MacOS/
export PATH=$HX_HOME:$PATH:.

export PATH="/opt/homebrew/opt/mongodb-community@5.0/bin:$PATH"
export PATH="/opt/homebrew/opt/redis@6.2/bin:$PATH"

# 打开命令行时输出信息
#echo -e "当前java信息：\n`java --version`"
echo -e "当前java信息：\n`java -version`"
echo "adb版本: `adb --version`"
echo "当前nvm版本：`nvm --version`"
echo "当前node版本：`node -v`"
echo "当前npm版本：`npm -v`"
echo "当前brew版本：`brew -v`"
echo "当前deno版本：`deno --version`"
echo "当前git版本：`git --version`"
echo "当前rust版本：`rustc --version`"
echo "当前redis版本：`redis-server --version`"
echo "可以使用docker创建指定版本和配置的redis"

# pnpm
export PNPM_HOME="/Users/chenbitao/Library/pnpm"
export PATH="$PNPM_HOME:$PATH"
# pnpm end
test -e "${HOME}/.iterm2_shell_integration.zsh" && source "${HOME}/.iterm2_shell_integration.zsh"

安装vscode插件

每个人都会有自己习惯的插件，如果是开发vue3，volar是必须的，vue3官网文档有介绍，这里不展开。 我列举一下我常用的几个插件。

  • Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

    汉化vscode界面

  • gitlens 必安装

    强大的vscode的git可视化工具，在vscode中使用，可以很方便的查看版本变更、提交记录、对比等，它功能很强大，要会用它有些难度，但它基础的功能就够你用的了。

  • Auto close tag

    可以自动帮你闭合tag。

  • Auto import

    当你在写import xx from 'aa';时它会检测你的项目目录未添加进.gitignore的目录，但是包括node_modules目录，列出可能的导入，你只需要选择并按下Enter就能自动导入代码。

  • import Cost

    导入统计，可以计算你导入的包的大小，当然并不是项目打包后的实际大小，但是也很有参考意义，当你在开发移动端的时候，任何一个没有计划的依赖，都可能导致打包产物变大，导致页面首次请求变慢。import cost会时刻提醒你，该考虑瘦身或exclude依赖了。

  • auto rename tag

    在编写html和xml的时候，标签总是成对出现<a></a>，当你修改第一个a的时候，插件会帮你把闭合的标签一同修改，十分的方便。

  • Browser Lite

    基于vite实现的vscode浏览器，可以快速的打开一个浏览器进行html的预览。 原理其实是使用npx vite port=4000将本地目录启动。也支持vite项目。

  • Dash

    如果是mac电脑使用dash，可以在vscode中安装dash插件，在阅读源码时，可以选中关键字，快速打开dash查看相关文档。

  • DotENV

在让vscode支持.env语法，提升阅读开发体验。

  • EditorConfig

    建议如果是架构师，一定要在项目的根目录下配置EditorConfig的配置文件，并加入状态管理。因为EditorConfig它不仅仅是一个插件，它本身是一种规范，很多IDE已经遵循了规范，只要在项目根目录配置了EditorConfig，所有开发人员打开这个项目开发，开发的格式风格都是一致的。换行、缩紧、tab还是空格，lr或lrcf都被约定了，IDE会帮助你严格执行规范。

  • ESLint、ESLint Chinese Rules、Prettier ESLint

    帮你约束代码，检测静态错误、格式化代码、美化格式

  • i18nAlly

    i18n开发的利器，可以快速在各个国家的语言文件中快速切换预览。

  • Live Server

    快速的启动一个http服务，可以预览html文件。

  • Live Share Extension Pack

    如果你有一个好基友、好代码搭子，你俩身处异地但是想要结对编程，这个插件包可以帮你实现愿望，通过登录账号后，将邀请发送处理，你俩可以在一个ide里进行编程，对提升代码水平、促进感情发酵非常有帮助。

  • Local History

    Local History是我必须安装的一个插件，我曾经有过丢失本地代码和git提交记录的惨痛教训，频繁的使用undo、redo真的不是好的办法。

    Local History会保存你本地的每次修改，并放在当前项目的根目录下，新建一个.history文件夹，会把你的每次修改都以文件名和时间的方式保存，但是要注意，一定要将.history/添加到.gitignore中排出版本控制，否则自动导入插件可能会把.history中的代码导入。

  • Lombok Annotations Support for VS Code

    让vscode支持lombok的装饰器

  • markdownlint

    md文件语法检测，让你写出漂亮格式的md

  • Quokka.js

    可以在js/ts文件里把代码的运行结果即时展现的差价，非常适合喜欢写代码片段的开发者使用。

  • Remote - SSH

    免费好用的ssh客户端，是的，在vscode中可以使用交互式的体验来使用ssh。

  • Remote Development

    可以通过ssh远程连接服务，使用vscode进行编辑，当有当需要修改nginx配置文件的操作，就可以使用这个插件来操作，免去了下载、上传的操作，就和本地编辑一样方便。

  • Search node_modules

Search node_modules插件可以方法的打开node_modules目录下的文件，不用再一级一级的去找了，对于查看源码特别方便。

  • vscode-icons

    可以给项目的文件夹和文件显示非常明显的图标，一眼丁真，再也不会眼花了。

  • Vue Volar extension Pack

    vue3开发必备安装的插件包，其中除了volar，还有许多流行的插件。

  • 中文标点符号转英文

    当输入了中文的全角标点符号，会自动换成半角。

一些代码片段插件

  • JavaScript (ES6) code snippets
  • JS JSX Snippets

视图类插件

  • ZainChen.json
  • jsonhero.io tools for VS Code
  • Data Preview

开源开发

  • licenser

    喜欢贡献开源代码的一定要安装这个，它会在你新建文件时，自动插入开源协议说明，只需要简单的配置，就可以成为一名开源贡献者。但是要注意，在公司项目的工作区中要禁用这个插件。

配置vscode代码片段

这是我最喜欢的功能，许多ide都有代码片段的功能。可以方便的生成代码骨架。

在vscode右下角设置-用户代码片段-新建代码片段/现有代码片段。在开发时只需要输入触发的关键字，方向键上下选择代码片段，按下Enter就可以自动输入代码片段，然后按按tab键切换占位符，依次输入需要个性化的代码，就能快速开发组件。

我最常用的代码片段生成器snippet-generator.app/

下面是我比较常用的代码片段，建议根据不同语言、框架来新建多个代码片段文件。

{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
// Placeholders with the same ids are connected.
// 把你的全局片段放在这里。每个代码段都在一个代码段名称下定义，并具有范围、前缀、正文和
// 描述。在范围字段中添加代码片段适用的语言id，这些语言id以逗号分隔。如果作用域为空或省略，
// 则该代码段将应用于所有语言。前缀是用来触发代码段的，主体将被扩展和插入。
// 可能的变量有:$1，$2用于制表位，$0用于最终的光标位置，${1:label}， ${2:another}用于占位符。连接具有相同id的占位符。
// 举个例子:
// "Print to console": {
//   "scope": "javascript,typescript",
//   "prefix": "log",
//   "body": [
//     "console.log('$1');",
//     "$2"
//   ],
//   "description": "Log output to console"
// }
"vue2 template": {
  "scope": "javascript,typescript,vue",
  "prefix": "vue2",
  "body": [
    "<template>",
    "  <view class=\"$1\">",
    "    <slot name=\"default\"></slot>",
    "  </view>",
    "</template>",
    "",
    "<script>",
    "export default {",
    "  name: '$1',",
    "  data() {",
    "    return {",
    "    }",
    "  },",
    "}",
    "</script>",
    "",
    "<style lang=\"less\" scoped>",
    ".$1 {",
    "  width: 100%;",
    "  background-color: rgba(0, 0, 0, 0.2);",
    "}",
    "</style>",
    "",
  ]
},
"taro template": {
  "prefix": "taro",
  "body": [
    "import Taro from '@tarojs/taro';",
    "import { View } from '@tarojs/components';",
    "",
    "import styles from './$1.module.scss';",
    "",
    "interface Props {",
    "  title: string;",
    "};",
    "const $2 = (props: Props) => {",
    "  const { title } = props;",
    "  return <View className={styles.container}>{title}</View>;",
    "};",
    "",
    "$2.defaultProps = {",
    "  title: '没有数据',",
    "};",
    "export default $2;",
    ""
  ],
  "description": ""
},
"普通uni页面": {
  "prefix": "uni-pages-simple",
  "body": [
    "<template>",
    "  <custom-pages-container>",
    "    <u-navbar",
    "      :border=\"true\"",
    "      :fixed=\"false\"",
    "      title=\"$1\"",
    "      auto-back",
    "    />",
    "    <view class=\"$2\">",
    "      $1",
    "    </view>",
    "  </custom-pages-container>",
    "</template>",
    "",
    "<script lang=\"ts\">",
    "import Vue from 'vue';",
    "import { mapActions, mapGetters } from 'vuex';",
    "import Component from 'vue-class-component';",
    "",
    "const $3Props = Vue.extend({",
    "  name: '$2',",
    "  props: {",
    "  },",
    "});",
    "",
    "@Component<$3>({",
    "  components: {},",
    "  computed: {",
    "    ...mapGetters({",
    "    }),",
    "  },",
    "  methods: {",
    "    ...mapActions({",
    "    })",
    "  },",
    "})",
    "export default class $3 extends $3Props {",
    "}",
    "</script>",
    "",
    "<style lang=\"scss\" scoped>",
    ".$2 {",
    "  width: 750rpx;",
    "}",
    "</style>",
    ""
  ],
  "description": "普通uni页面"
},
"vue3 setup ts": {
  "prefix": "vue3setupts",
  "body": [
    "<script setup lang=\"ts\">",
    "</script>",
    "",
    "<template>",
    "  Hello World",
    "</template>",
    "",
    "<style lang=\"less\" scoped>",
    "",
    "</style>",
    "",
  ],
  "description": "vue3 setup ts"
}
    "vue3 setup ts片段": {
  "prefix": "vue3setupts",
  "body": [
    "<script setup lang=\"ts\">",
    "</script>",
    "",
    "<template>",
    "",
    "</template>",
    "",
    "<style lang=\"less\" scoped>",
    "</style>"
  ],
  "description": "vue3 setup ts片段"
},
"vue3 setup ts片段 v2": {
  "prefix": "vue3setuptsv2",
  "body": [
    "<script setup lang=\"ts\">",
    "import { NewsType } from '@/constants/news';",
    "",
    "export interface I${1:NewsTypeSelect}Props {",
    "  modelValue: NewsType;",
    "}",
    "",
    "const props = withDefaults(defineProps<I${1:NewsTypeSelect}Props>(), {",
    "  modelValue: NewsType.all,",
    "});",
    "</script>",
    "",
    "<template>",
    "  <div class=\"${2:news-type-select}\">",
    "    Hello World!",
    "  </div>",
    "</template>",
    "",
    "<style lang=\"less\" scoped>",
    ".${2:news-type-select} {",
    "  color: green;",
    "}",
    "</style>"
  ],
  "description": "vue3setupv2"
},
"tsx": {
  "prefix": "vue3tsx",
  "body": [
    "import { defineComponent } from 'vue';",
    "",
    "export default defineComponent({",
    "  name: '$1:componentName',",
    "  props: {},",
    "  setup(props, ctx) {",
    "    return {}",
    "  },",
    "  render() {",
    "    return <g",
    "      id=\"$1:componentName\"",
    "      transform=\"translate(0,0)\"",
    "    >",
    "      <circle cx=\"0\" cy=\"0\" r=\"50\" fill=\"#FFA408\"></circle><text y=\"6\" text-anchor=\"middle\" fill=\"#fff\" style=\"font-size: 16px; font-weight: 600;\">大数据</text>",
    "    </g>",
    "  },",
    "});",
    ""
  ],
  "description": "tsx"
},
"vue2-nuxt-api": {
  "prefix": "vue2-nuxt-api",
  "body": [
    "<template>",
    "  <div class=\"${1:example}\">${1:example}</div>",
    "</template>",
    "",
    "<script>",
    "  import { defineComponent } from '@nuxtjs/composition-api'",
    "",
    "  export default defineComponent({",
    "    name: '${1:example}',",
    "    props: {},",
    "    data() {",
    "      return {}",
    "    },",
    "    setup(props) {",
    "      return {}",
    "    }",
    "  })",
    "</script>",
    "",
    "<style lang=\"scss\" scoped>",
    "  .${1:example} {",
    "    width: 100%;",
    "    height: 100%;",
    "  }",
    "</style>",
    ""
  ],
  "description": "vue2-nuxt-api"
},
"nuxtvuesetup": {
  "prefix": "vuenuxtsetup",
  "body": [
    "<template>",
    "  <div class=\"${1:example}\">",
    "    Hello world!",
    "  </div>",
    "</template>",
    "",
    "<script lang=\"ts\">",
    "  import { defineComponent } from '@nuxtjs/composition-api'",
    "",
    "  export default defineComponent({",
    "    name: '${1:example}',",
    "    props: {",
    "      zoom: {",
    "        type: Number,",
    "        default: 0.3",
    "      },",
    "    },",
    "    setup(props, context) {",
    "      return {}",
    "    }",
    "  })",
    "</script>",
    "",
    "<style lang=\"scss\" scoped>",
    "  .${1:example} {",
    "  }",
    "</style>",
    "<style lang=\"scss\" module></style>",
    ""
  ],
  "description": "nuxtvuesetup"
},
"vue3 js setup": {
  "prefix": "vue3jssetup",
  "body": [
    "<template>",
    "  <div class=\"${1:example}\">${1:example}</div>",
    "</template>",
    "",
    "<script>",
    "  export default {",
    "    name: '${2:Example}',",
    "    setup() {",
    "      return {}",
    "    }",
    "  }",
    "</script>",
    "",
    "<style lang=\"scss\" scoped>",
    "  .${1:example} {",
    "  }",
    "</style>",
    ""
  ],
  "description": "vue3 js setup"
},
}

这里简单介绍下规则，占位符以$1、$2、$3...这种格式开始，可以同时存在多个相同的占位符，编辑时会同时修改相同标志的占位符处的字符。当需要在占位符出展示默认的字符时，可以使用${1:example}的格式来书写，example就是占位符默认的代码。

更多规则，请查阅vscode官方文档。

阅读公司文档、学习公司技术体系、代码规范；建立个人文档

每到一个公司，我都有写文档的习惯，在公司的wiki、docs等工具上留下自己的文档，对评级、传承公司文化、带新人，以及离职交接都有帮助，但一定要注意，不要带出公司。你可以周末在外面写，然后带回公司，但千万不要从公司往外带，有个先后的关系，切记切记，信息安全不能疏忽。

创建开发目录Developer

我会在电脑的D盘目录或用户目录下新建一个Developer目录，存放所有和开发有关的东西，并将目录拖放到左侧快捷栏，方便打开Finder或资源管理器时可以快速导航到目录。对于查找开发工具、文档，提升开发效率有不小的提升。

截屏2023-07-05 16.48.54.png

创建github、gitee、code目录

在Developer中新建github/gitee/code文件夹，分别存放从github、gitee、公司仓库clone下来的目录，在需要阅读源码时，可以很方便的找到需要的项目。

配置git证书和config文件

使用git，一定要配置git证书，可以很方便的提交和拉取代码，再也不用一遍一遍的输入用户名和密码了。如何配置各大代码仓库网站都有文档，这里推荐初学者阅读gitee的官方文档，它是中文的help.gitee.com/repository/…

git config配置代码提交信息

git支持3 种级别的配置信息，分别是项目级--local、用户级--global、系统级--system。

在运行 Git 前，你需要进行一些基本配置，这些配置只需在每台计算机上设置一次，程序升级时会保留。

配置文件位置

Git 使用 git config 工具来设置配置变量，配置可存储在以下三个位置：

  • 系统级配置：/etc/gitconfig，适用于系统所有用户和仓库。通过 --system 选项修改（需管理员权限）。
  • 用户级配置：~/.gitconfig 或 ~/.config/git/config，适用于当前用户的所有仓库。通过 --global 选项修改。
  • 仓库级配置：当前仓库的 .git/config，仅对当前仓库有效。通过 --local 选项修改（默认选项）。

配置优先级：--local > --global > --system

注意 window 的路径和 unix 类系统不同。

  • 用户级配置：C:\Users$USER.gitconfig
  • 系统级配置：C:\ProgramData\Git\config（需管理员权限）。

查看配置

运行以下命令查看所有配置及其来源：

git config --list --show-origin

设置用户信息

安装 Git 后，需设置用户名和邮箱，Git 会将这些信息写入每次提交中：

git config --global user.name "Your Name"
git config --global user.email "you@example.com"
  • --global：配置对所有仓库生效，只需运行一次。
  • 若需要为特定项目设置不同信息，进入项目目录运行不带 --global 的命令即可。
# 查看仓库用户信息
git config --local user.name;
# 设置用户仓库信息
git config --local user.name 你的名字;
# 查看用户邮箱
git config --local user.email;
# 设置用户邮箱
git config --local user.email 你的邮箱;

参考文档起步-初次运行-Git-前的配置

安装commitizen，使用git cz提交代码

使用commitizen提交代码，会自动帮你使用规范来规范commit message，如果不是特别个性化的规范，使用默认的配置即可，按照下面的方法安装和配置。需要提交代码时，使用git cz替换git commit，就可以使用交互式的方式规范代码提交了，但是对vi命令有一点点小要求，需要会切换vm编辑模式。留个小任务，在网上寻找vi的操作文档并使用vi进行一次编辑。当完成任务后，就可以使用git cz来提交代码了。

npm install -g commitizen cz-conventional-changelog
echo  ' { "path": "cz-conventional-changelog" }' >> ~/.czrc

参考 www.npmjs.com/package/com…

以上就是我拿到新电脑后的的准备工作，基于网络和电脑配置情况，一般这些大概在4h内完成。当天下午就可以开始阅读公司文档。

感谢你看到这里，文档并不详细，因为操作都不难，都能找到相应的官网文档和网友留下的经验，多多查阅，希望对你有所帮助。

如果你有什么想法和意见，可以在下面留下来。

avatar
文章
阅读
粉丝