DAILY DOCDAILY DOC
Rust
Node
Notes
Ubuntu
Leetcode
  • it-tools
  • excalidraw
  • linux-command
Rust
Node
Notes
Ubuntu
Leetcode
  • it-tools
  • excalidraw
  • linux-command
  • BFC 块级格式化上下文
  • Note
  • WebAssembly
  • public api
  • 位运算
  • bitwise operator
  • css实现隐藏效果
  • css snippets
  • 抖音点赞
  • js 相等判断
  • fetch ReadableStream
  • git
  • Github Actions 工作流
  • google search
  • RPC vs HTTP
  • gravatar
  • hhkb
  • Init project
  • input 文件上传
  • mac

    • Mac 使用技巧
    • alfred
    • mac shortcuts
    • shortcuts text edit
    • mac 修改host
  • 微前端
  • mock
  • nginx dump
  • nginx
  • NirCmd
  • npm
  • Operator Precedence
  • package.json
  • url query 解析
  • pnpm
  • JavaScript Precise countdown
  • react 模版
  • regexp
  • setup web development
  • telegram

    • telegram bot
  • timeFunction ease
  • 视频裁剪
  • vscode

    • vscode 高级指南
    • bracketPairs
    • jsconfig.json
    • vscode pipe into code
    • social project
    • vscode tasks
  • draggable resizable
  • windows 激活
  • 前端截图实现
  • 文本配音 富文本实现
  • 图片处理
  • 前端坐标
  • 定时任务
  • work efficient
  • 微信小程序动画实现方案
  • 排列组合
  • 数列
  • 语音驱动文字
  • 浏览器
  • 状态管理
  • 移动盒子
  • 移动端开发常用snippets
  • 设计模式
  • web performance

Init project

JS 项目工程化配置

Git

初始化仓库,新建配置文件

git init 

.gitignore 配置文件

node_modules/
_book/
*.zip
buil/
dist/

Node

nvm 配置node 版本 .nvmrc

# .nvmrc
v10.24.1
nvm install 
nvm use 
  • nvm

NPM

  • .npmrc
# .npmrc
# @myscope:registry=https://mycustomregistry.example.org
registry="https://registry.npm.taobao.org/" 
npm init # 创建 packge.json 文件 
  • npm

Eslint

配置文件:

  • .eslintrc.json
  • .eslintignore
npm i -D eslint # 全局安装也ok
npx eslint --init  # 创建eslint 配置文件 
// eslintignore
node_modules/
_book/
*.zip
  • eslint

Prettier 格式化

  • .prettierrc.json
  • .prettierignore
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier
// perttierrc.json 
{"printWidth":100,"tabWidth":2,"useTabs":false,"singleQuote":true,"jsxBracketSameLine":true,"arrowParens":"avoid","semi":true,"trailingComma":"es5"}
// eslintrc
{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}
  • prettier

Husky

	npx husky-init && npm install       # npm
	npx husky add .husky/pre-commit 'echo pre-commit hook '

编辑 .husky 文件夹下相应的文件 编写自定义脚本文件实现 commit 前 lint 格式化 代码

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged # 执行 lint-stagedrc 配置文件
  • husky

Lint-staged

npx mrm@2 lint-staged 

创建.lintstagedrc.json 配置文件

{
  "*.{ts,js}": "eslint --cache --fix",
  "*.{ts,js,css,md,json,html}": "prettier --write"
}

  • lint-staged

Git-cz & commitizen

npm install -D git-cz commitizen 

package.json 添加配置

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

执行 git commit 的时候替换为 npx git-cz

TypeScript

安装

npm install typescript --save-dev 

# Base tsconfig 
npm install --save-dev @tsconfig/recommended
npm install --save-dev @tsconfig/node16

# node type
npm i @types/node

tsconfig.json

创建配置文件npx tsc --init

tsconfig.json 参考

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Enable incremental compilation */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    "lib": ["DOM", "ESNext"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
    // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */

    /* Modules */
    "module": "nodenext" /* Specify what module code is generated. */,
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,

    /* JavaScript Support */
    "allowJs": true /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */,
    "checkJs": true /* Enable error reporting in type-checked JavaScript files. */,
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */

    /* Emit */
    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
    "outDir": "./build" /* Specify an output folder for all emitted files. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "extends": "@tsconfig/node16/tsconfig.json",
  "include": ["app/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts", "build/", "debug"]
}

Refer

  • @tsconfig/recommended

Unit-test

Github actions

Travis

jest

Last Updated:
Contributors: rosendo
Prev
hhkb
Next
input 文件上传