项目搭建

eslint

eslint是一款代码规范估计,用于规范代码格式

eslint官网

安装eslint

npm init @eslint/config

husky

husky是一款git的hook工具, 可以更方便的设置git hook husky官网

安装husky

npm install --save-dev husky

pnpm add --save-dev husky

yarn add --dev husky
# Add pinst ONLY if your package is not private
yarn add --dev pinst

bun add --dev husky

配置husky

npx husky init

pnpm exec husky init

# 不支持

bunx husky init

commitlint

commitlint 是一个提交信息规范的插件 commitlint 官网

commitlint安装

npm install --save-dev @commitlint/config-conventional @commitlint/cli

pnpm add --save-dev @commitlint/config-conventional @commitlint/cli

yarn add --dev @commitlint/config-conventional @commitlint/cli

bun add --dev @commitlint/config-conventional @commitlint/cli

commitlint配置

在项目根目录下创建配置文件commitlint.config.mjs

export default {
  extends: ["@commitlint/config-conventional"],
};

添加钩子

cat > .husky/commit-msg  << 'EOF'
npx --no -- commitlint --edit ${1}
EOF

安装prompt-cli

prompt-cli 可以根据 commitlint.config快速生成提交信息

npm install --save-dev @commitlint/prompt-cli

pnpm add --save-dev @commitlint/prompt-cli

yarn add --dev @commitlint/prompt-cli

bun add --dev @commitlint/prompt-cli

prompt-cli使用

npx commit

pnpm exec commit

# 不支持

bunx commit

可以将commit添加到package.json

{
  "scripts": {
    "commit": "commit"
  }
}

lint-staged

lint-staged是针对暂存区的git文件运行linter的工具 lint-staged官网

lint-staged安装

npm install --save-dev lint-staged

pnpm add --save-dev lint-staged

yarn add --dev lint-staged

bun add --dev lint-staged

lint-staged配置

lint-staged配置可以放在package.json

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      // 需要检查的文件
      "prettier --write", // 使用prettier格式化
      "eslint --fix", // eslint 检查代码规范
    ],
  },
}

添加钩子

cat > .husky/pre-commit  << EOF
npx lint-staged
EOF

prettier

prettier是一款支持多语言的代码格式化工具 prettier官网

prettier 安装

npm install --save-dev prettier

pnpm add --save-dev prettier

yarn add --dev --exact prettier

bun add --dev prettier

prettier 配置

创建.prettierignore文件, 排除运行prettier的目录

# Ignore artifacts:
build
coverage

创建配置文件prettier.config.mjs

// prettier.config.js, .prettierrc.js, prettier.config.mjs, or .prettierrc.mjs

/** @type {import("prettier").Config} */
const config = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: false,
  singleQuote: true,
};

export default config;

兼容eslint

安装兼容插件

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

pnpm add --save-dev eslint-config-prettier eslint-plugin-prettier

yarn add --dev eslint-config-prettier eslint-plugin-prettier

bun add --dev eslint-config-prettier eslint-plugin-prettier

修改eslint配置文件

{
  "extends": ["prettier"],
  "plugins": ["prettier"]
}

stylelint

stylelint 安装

stylelint是对css等样式表进行检查的工具stylelint官网

npm init stylelint

支持scss

npm install --save-dev stylelint stylelint-config-standard-scss

pnpm add --save-dev stylelint stylelint-config-standard-scss

yarn add --dev stylelint stylelint-config-standard-scss

bun add --dev stylelint stylelint-config-standard-scss

修改stylelint配置文件

/** @type {import('stylelint').Config} */
export default {
  extends: "stylelint-config-standard-scss",
};

设置stylelint顺序插件

npm install --save-dev stylelint-order

pnpm add --save-dev stylelint-order

yarn add --dev stylelint-order

bun add --dev stylelint-order

修改stylelint配置文件

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard"],
  plugins: ["stylelint-order"],
  rules: {
    "order/properties-alphabetical-order": true,
  },
};

设置stylelint支持vue

npm install --save-dev postcss-html stylelint-config-html

pnpm add --save-dev postcss-html stylelint-config-html

yarn add --dev postcss-html stylelint-config-html

bun add --dev postcss-html stylelint-config-html

修改stylelint配置文件

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-html"],
};

Tailwind CSS

Tailwind CSS是一款现代css库, 通过类名引用样式 Tailwind CSS的安装