Vue 项目工程化规范

使用 vite 创建项目

npm init vite@latest
git init

EditorConfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Prettier

npm install prettier -D

新建 .prettierrc

{
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

新建 .prettierignore

dist
node_modules
public

ESLint

npm install eslint -D
npx eslint --init

Where does your code run? -- browser, node

Husky & lint-staged

npm install husky lint-staged -D

npx husky init
echo "npm run lint" > .husky/pre-commit

"scripts": {
  "lint": "lint-staged"
},
"lint-staged": {
  "src/*.{js,ts,jsx,tsx,vue}": [
    "node_modules/.bin/prettier --write .",
    "node_modules/.bin/eslint --fix .",
    "git add ."
  ],
  "src/*.{css,scss,less,json,html,md}": [
    "node_modules/.bin/prettier --write .",
    "git add ."
  ]
}

Commitizen

npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact

修改 package.json

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

Commitlint

npm install @commitlint/config-conventional @commitlint/cli -D

新建 commitlint.config.cjs

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

echo "npx --no-install commitlint --edit $1" > .husky/commit-msg

jsconfig.json / tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["dist", "node_modules", "public"]
}

TypeScript 项目配置

如果是 TypeScript 项目，修改一下 .eslintrc.cjs

parser: 'vue-eslint-parser',
parserOptions: {
  ecmaVersion: 'latest',
  parser: '@typescript-eslint/parser',
  sourceType: 'module'
},