前端开始刷 LeetCode 前的环境准备

1,028 阅读2分钟

最近想学习一下 mkw的 数据结构与算法,于是有了下面这个记录,供需要的同学参考。

typescript 挺好用,类型定义,语法自动提醒, 下面配置一个 vscode + typescript + jest 环境

项目目录结构

➜  leetcode git:(master) ✗ tree -L 3 -I node_*
.
├── code
│   ├── string
│   │   └── lesson1.ts
│   └── sum.ts
├── docs # 文档
├── jest.config.js
├── package.json
├── test
│   ├── string
│   │   └── lesson1.test.ts
│   └── sum.test.ts
├── tsconfig.json
├── yarn-error.log
├── yarn.lock
└── 环境安装.md

安装依赖

1 首先全局安装 commitizen cz-conventional-changelog

npm install -g commitizen cz-conventional-changelog
npm init -y

npm install --save-dev typescript ts-node jest @types/jest ts-jest babel-jest @babel/core   @babel/preset-env @babel/preset-react regenerator-runtime prettier cz-conventional-changelog @commitlint/config-conventional @commitlint/cli

commitizen init cz-conventional-changelog 

@babel/core 对应的预设 是 @babel/preset-env , @babel/preset-react", 而不是babel-preset-env` 否则版本不对应会报错

babel-core@^7.9.4-bridge.0 这个版本号看^7.9.4 参考的是 @babel/core 会自动跳出列表让选择版本号,选择庽最新的就可以,

接着你可以看下你项目的package.json ,会多出一部分配置

"devDependencies": {
    "cz-conventional-changelog": "^3.2.0"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

之后需要 git commit 的操作全部换成 git cz

配置 commitlint

接着在package.json 所在目录新建 commitlint.config.js 文件 然后写入

module.exports = { extends: ["@commitlint/config-conventional"] };

在项目中安装husky

yarn add husky

接着配置 husky

"dependencies": {
    "@commitlint/cli": "^8.3.5",
    "@commitlint/config-conventional": "^8.3.4",
    "husky": "^4.2.5"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $GIT_PARAMS"
    }
  }

当我们去以不合法的提交信息进行提交代码时,会进行检查

添加 npm 配置

编辑 package.json

{
  "scripts": {
    "test": "jest  --watchAll"
  }
}

添加 babel 配置

编辑 .babelrc

{
  "presets": ["@babel/env", "@babel/react"]
}

添加 git 忽略文件

编辑 .gitignore

node_modules
.DS_Store

添加 jest 配置

编辑 jest.config.js

module.exports = {
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
}

添加 prettier 配置

编辑 .prettierrc.js

module.exports = {
  trailingComma: 'none',
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
  arrowParens: 'always',
  endOfLine: 'lf'
}

添加 typescript 配置

tsc --init  # 生成 tsconfig.json

在默认生成的 tsconfig.json 文件暂时添加 "include": ["code/**/*.ts", "test/**/*.ts"]

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    /* 里面的内容暂时不添加新内容 */
  },
  "include": ["code/**/*.ts", "test/**/*.ts"]
}

创建 ts 文件

const sum = (a: number, b: number) => {
  return a + b
}
export default sum
import sum from './index'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

启动测试

npm test

工具安装

  • IDE:VS Code
  • 插件:
    • advanced-new-file
    • Auto Import Relative Path
    • Path Intellisense
    • Path Autocomplete
    • Node Require
    • Prettier-Code formatter

参考

用 jest 测试 ts 文件 洋小洋