Nuxt3-02项目规范

prettier

yarn add -D prettier @types/prettier

touch prettier.config.js

// prettier.config.js

/** @type {import('prettier').Config} */
module.exports = {
  "bracketSameLine": true,
  "jsxBracketSameLine": true,
  "jsxSingleQuote": true,
  "printWidth": 140,
  "semi": false,
  "singleAttributePerLine": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": true
}

eslint

npm i eslint -g

eslint --init

针对nuxt3的配置

yarn add -D eslint-plugin-nuxt

// .eslintrc.js
module.exports = {
	env: {
		browser: true,
		es2021: true,
		node: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:vue/vue3-essential',
		'plugin:@typescript-eslint/recommended',
		'plugin:nuxt/recommended',
	],
	overrides: [],
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
	},
	plugins: ['vue', '@typescript-eslint', 'nuxt'],
	rules: {
		'nuxt/rule-name': 2,
	},
}

联动 eslint 和 prettier

• eslint-config-prettier: 关闭所有不必要或可能与 prettier 冲突的规则，确保将其放在 extends 队列最后，这样它将覆盖其他配置
• eslint-plugin-prettier: 通过prettier格式化eslint

yarn add eslint-plugin-prettier eslint-config-prettier -D

// .eslintrc.js
module.exports = {
	env: {
		browser: true,
		es2021: true,
		node: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:vue/vue3-essential',
		'plugin:@typescript-eslint/recommended',
		'plugin:nuxt/recommended',
		'prettier',
	],
	overrides: [],
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
	},
	plugins: ['vue', '@typescript-eslint', 'nuxt', 'prettier'],
	rules: {
		'prettier/prettier': 1, // 0 代表 off 关闭, 1 代表 warning, 2 代表 error
		'nuxt/rule-name': 2,
	},
}

Error: vue3+ts+eslint下Parsing error: ‘＞‘ expected.eslint

修改.eslintrc.js 配置

yarn add -D vue-eslint-parser

// .eslintrc.js
module.exports = {
  parser: 'vue-eslint-parser',  // 修改此处
  parserOptions: {
    parser: '@typescript-eslint/parser',  // 修改此处
  },
};

联动 stylelint 和 prettier

• stylelint-config-standard 样式规则集
• stylelint-order 样式排序插件，需要手动配置样式顺序
• stylelint-config-rational-order 结合stylelint-order使用，配置好的样式顺序
• stylelint-config-prettier 关闭和prettier冲突的规则
• stylelint-prettier 通过prettier格式化stylelint

yarn add -D stylelint stylelint-config-standard stylelint-order stylelint-config-rational-order stylelint-prettier stylelint-config-prettier

yarn add -D postcss-html stylelint-config-standard-vue stylelint-config-standard-scss

touch .stylelintrc.js

// .stylelintrc.js
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-standard-vue/scss',
    'stylelint-config-rational-order',
    'stylelint-prettier/recommended'
  ],
  plugins: ['stylelint-order', 'stylelint-config-rational-order/plugin'],
  'order/properties-order': [],
  'plugin/rational-order': [
    true,
    {
      'border-in-box-model': false,
      'empty-line-between-groups': false
    }
  ]
}

vscode 配置

• 插件

// .vscode/extensions.json

{
    "recommendations": [
        "Vue.volar",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "stylelint.vscode-stylelint"
    ]
}

• 工作区配置

// .vscode/settings.json

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true,
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss",
        "sass",
        "vue"
    ]
}

git 规范

• commitlint 约束commit messag规范
• lint-stage 提交代码时只针对暂存区文件（git add）, 进行代码lint检查并fix
• husky git hooks工具 git操作时可运行指定钩子命令

配置commitlint

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

touch commitlint.config.js

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

// 使用
git commit -m <type>(<scope>?): <subject>

type(必须)

• feat：新功能（feature）
• ci：自动化流程配置修改
• fix：修补bug
• docs：文档更新（documentation）
• style：修改了空格、缩进等（不影响代码运行的变动）
• refactor：功能重构
• test：增加测试
• chore：构建过程或辅助工具的变动 比如 webpack babel eslint配置
• perf：优化相关，比如提升性能、体验。
• revert：回滚

scope（可选）

• scope用于说明 commit 影响的范围

subject(必须):

• commit 信息

配置lint-stage

yarn add -D lint-staged

touch .lintstagedrc

// .lintstagedrc
{
  "*.{css,less,scss}": [
    "npx stylelint --fix",
    "npx prettier --write"
  ],
  "*.{js,jsx,ts,tsx}": [
    "npx eslint --fix",
    "npx prettier --write"
  ],
  "*.{json,md}": [
    "npx prettier --write"
  ]
}

配置husky

yarn add -D husky

npx --no-install husky install

npm set-script prepare "husky install"
// 提交之前进行代码校验
npx husky add .husky/pre-commit "npx lint-staged"

// 对commit 进行格式校验
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'