创建与配置

创建nuxt3应用

npx nuxi init nuxt-app
or
pnpm dlx nuxi init nuxt-app

注意：这里创建项目的时候由于网络的原因可能会创建失败参考

创建完成之后进入项目目录安装npm包，然后执行npm run dev即可启动。

安装sass

安装sass的方式特别简单只要运行一下命令

npm install -D sass

安装完成后直接在项目中添加和引用 .scss 文件或者把 .vue 中的 <style 添加 lang="scss" 属性，就能够使用 scss 了。

自此项目创建完成

配置eslint、stylelint、prettier

1. 配置eslint

npm install -D eslint eslint-plugin-nuxt @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue

.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:nuxt/recommended'
    ],
    parserOptions: {
        ecmaVersion: "latest",
        parser: "@typescript-eslint/parser",
        sourceType: "module"
    },
    plugins: [
        "vue",
        "@typescript-eslint"
    ],
    rules: {
    }
}

2. 配合prettier代码格式化

npm install -D prettier eslint-plugin-prettier eslint-config-prettier

安装完成后再eslintrc.js文件里面的extends添加plugin:prettier/recommended，以及在rules中添加校验 'prettier/prettier': 'error',

module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:nuxt/recommended',
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        ecmaVersion: "latest",
        parser: "@typescript-eslint/parser",
        sourceType: "module"
    },
    plugins: [
        "vue",
        "@typescript-eslint"
    ],
    rules: {
        'prettier/prettier': 'error',
    }
}

在目录下创建prettier.config.js添加代码风格配置

module.exports = {
  // 每行最多多少个字符换行
  printWidth: 100,
  //tab键缩进为2空格
  tabWidth: 2,
  // 使用分号, 默认true
  semi: true,
  // 是否缩进Vue 文件中的代码<script>和<style>标签
  vueIndentScriptAndStyle: true,
  //  使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 在对象或数组最后一个元素后面是否加逗号
  trailingComma: 'all',
  proseWrap: 'never',
  // 为 HTML、Vue、Angular 和 Handlebars 指定全局空白敏感度
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto',
};

这里请更具自己的需求进行配置

3. styleLint

npm install -D stylelint stylelint-config-prettier stylelint-config-standard stylelint-scss stylelint-order

添加 stylelint.config.js 配置

module.exports = {
  plugins: ['stylelint-scss', 'stylelint-order'],
  customSyntax: 'postcss-html',
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  rules: {
    indentation: 2, // 缩进2个空格
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['mixin', 'extend', 'content', 'include'],
      },
    ],
    'no-descending-specificity': null, // 禁止特异性较低的选择器在特异性较高的选择器之后重写
    'no-empty-source': null,
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['export'],
      },
    ],
    // 关闭禁用位置属性，这个对scss导出变量有问题
    'property-no-unknown': null,
    // https://github.com/kristerkari/stylelint-scss scsslint规范配置
    'scss/comment-no-loud': true, // 禁止使用/*注释
    'scss/comment-no-empty': true, // 禁止空注释
  },
  overrides: [
    {
      files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
      extends: ['stylelint-config-recommended'],
      rules: {
        'keyframes-name-pattern': null,
        'selector-pseudo-class-no-unknown': [
          true,
          {
            ignorePseudoClasses: ['deep', 'global'],
          },
        ],
        'selector-pseudo-element-no-unknown': [
          true,
          {
            ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
          },
        ],
      },
    },
  ],
  ignoreFiles: ['**/*.js', '**/*.ts'],
};

代码commit 提交代码前验证

1. 安装插件

npm install -D husky lint-staged pretty-quick  @commitlint/cli @commitlint/config-conventional

2. 在package.json底部添加配置lint-staged校验

"lint-staged": {
    "˜{src,mock,build}/**/*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write",
      "stylelint --fix"
    ],
    "*.{scss,less,styl,html}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  }

然后在package.json->scripts添加 "lint:staged": "lint-staged",

  "scripts": {
    "lint:pretty": "pretty-quick --staged",
    "lint:staged": "lint-staged",
  },

3. 配置commitLint
   在根目录创建commitlint.config.js文件

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feature', 'fixbug', 'refactor', 'docs', 'style', 'perf', 'chore', 'revert'],
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
  },
};

以上文件根据个人需求配置
4. 配置husky
安装完成后执行下面命令生成pre-commit钩子

npx husky-init

注意：执行时要确保你当前目录是git仓库，如果不是执行git init 本地初始化仓库
执行完成之后会目录上创建了一个.husky文件夹，在文件夹里面有个pre-commit文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test

其中如果项目中没有单元测试的话可以手动把他删除掉，然后我们在里面添加上我们刚配置的的lint-staged和prettier校验命令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint:staged
npm run lint:pretty

或者通过命令的方式添加

npx husky add .husky/pre-commit 'npm run lint:staged'
npx husky add .husky/pre-commit 'npm run lint:pretty'

最后执行以下命令添加commit格式校验规范

npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'

完成以上配置之后提交代码就可以校验代码规范，以及git commit规范校验

添加cz-customizable插件

以上提交校验的类型，在实际上使用的时候难免会忘记有哪些类型，自此就需要打开配置文件去查看，为了让规范和便捷共存，这里使用cz-customizable让commit类型变成选择的形式

1. 安装一下插件

npm install -D commitizen cz-customizable cz-conventional-changelog

2. 很目录下创建.cz-config.js文件

module.exports = {
  types: [
    { emoji: '', value: 'feature', name: 'feature:   新功能' },
    { emoji: '', value: 'fixbug', name: 'fixbug:    修复' },
    { emoji: '', value: 'docs', name: 'docs:      文档变更' },
    {
      emoji: '',
      value: 'style',
      name: 'style:     不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)',
    },
    { emoji: '', value: 'refactor', name: 'refactor:  重构（既不是增加feature）,也不是修复bug' },
    { emoji: '', value: 'perf', name: 'perf:      性能优化' },
    {
      emoji: '',
      value: 'chore',
      name: 'chore:     不属于以上类型的其他类型，比如构建流程, 依赖管理',
    },
    { emoji: '', value: 'revert', name: 'revert:    回退' },
  ],
  messages: {
    type: '请选择提交的类型；',
    customScope: '请输入修改的范围（可选）',
    subject: '请简要描述提交（必填）',
    body: '请输入详细描述（可选）',
    footer: '请选择要关闭的issue（可选）',
    confirmCommit: '确认要使用以上信息提交？（y/n）',
  },
  skipQuestions: ['scope', 'customScope', 'body', 'footer'],
  subjectLimit: 100,
};

3. 在package.json中添加config配置

"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": ".cz-config.js"
    }
  },

4. 在package.json->scripts添加"commit": "git-cz"命令

"scripts": {
    "commit": "git-cz"
  },

然后git add. 之后执行npm run commit 就可以选择提交的类型了