初始化Vite3.0+Vue3+Ts项目并配置规范工具(ESLint + Prettier + Husky )

技术依赖症患者
309 阅读4分钟

配置环境说明

  • 系统环境: window10
  • node: v14.19.0
  • npm: 6.14.6
  • pnpm: 7.9.0

创建项目

兼容性注意: Vite 需要 Node.js 版本 >= 12.0.0。

创建项目建议: 使用 命令提示符(cmd) 执行命令，可以通过 空格 控制选项

pnpm create vite
  • Project name: 输入项目名(默认vite-project)
  • Select a framework ：选择框架
  • Select a variant: 选择框架变体

配置 ESlint

初始化

pnpm i eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D vite-plugin-eslint

npm set-script lint:script "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./"

然后在 vite.config.ts 中接入

import viteEslint from 'vite-plugin-eslint'; 
{ 
   plugins: [
       ...
       viteEslint(), 
   ] 
}

.eslintrc.cjs 配置

详细规则查看

module.exports = {
  root:true,
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true, // 使用setup语法糖
  },
  extends: [
    'eslint:recommended',
    '@vue/prettier',
    'standard',
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  parser: 'vue-eslint-parser',
  plugins: ['vue', '@typescript-eslint', 'prettier'],
  rules: {
    '@typescript-eslint/no-this-alias': 'warn',
    '@typescript-eslint/adjacent-overload-signatures': 'warn',
    'no-console': 0,
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'vue/comment-directive': 0,
    // key 为规则名，value 配置内容
    'no-cond-assign': ['error', 'always'],
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-explicit-any': ['warn'],
    // 关闭驼峰命名规则验证(变量不允许下划线,常量除外)
    camelcase: [
      0,
      {
        properties: 'always',
      },
    ],
    // 忽略默认的禁令类型
    '@typescript-eslint/ban-types': [
      'error',
      {
        types: {
          // un-ban a type that's banned by default
          String: false,
          Boolean: false,
          Number: false,
          Symbol: false,
          '{}': false,
          Object: false,
          object: false,
          Function: false,
        },
        extendDefaults: true,
      },
    ],
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'always',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: {
          max: 10,
        },
        multiline: {
          max: 1,
        },
      },
    ],
    'vue/singleline-html-element-content-newline':'off',
    'vue/multi-word-component-names': [
      'error',
      {
        ignores: [],
      },
    ],
  },
};

配置规则等级开关

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

忽略文件：.eslintignore

.idea
.vscode
.husky
node_modules
*.md
*.woff
*.sh
*.ttf
/src/mock/*
/public
/docs
/bin
.eslintrc.cjs
prettier.config.js
dist

配置 Prettierrc

初始化

pnpm i prettier eslint-config-prettier  eslint-plugin-prettier  @vue/eslint-config-prettier @babel/eslint-parser @babel/core  --save-dev

.prettierrc.cjs 配置

详细规则查看

// .prettierrc.cjs
module.exports = {
  endOfLine: 'auto',
  //一行的字符数，如果超过会进行换行，默认为100
  printWidth: 140,
  // 一个 tab 代表几个空格数，默认为 2 个
  tabWidth: 2,
  // 字符串是否使用单引号，默认为 false，使用双引号
  singleQuote: true,
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: true,
  // 尾随逗号
  trailingComma: 'all',
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 换行符使用 lf
  endOfLine: 'lf',
};

代码提交时验证( Husky + lint-staged )

安装

pnpm i husky lint-staged -D

在根目录下手动创建 .husky 文件夹,在终端下执行

npx husky add .husky/pre-commit "npx --no -- lint-staged"
npm set-script prepare "husky install"
//若未初始化 则先 git init
npm run prepare

然后在 package.json中添加

{ 
    ...
    "lint-staged": { 
        "**/*.{js,jsx,tsx,ts}":[ "npm run lint:script", "git add ." ], 
   }
}

Git提交规范验证

安装

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D

然后再根目录下新建 .commitlintrc.js，在终端下运行：

echo "module.exports = { extends: ['@commitlint/config-conventional'];" > commitlint.cjs

最后在终端执行命令,将 commitlint 的功能集成到 Husky 中：

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

执行后会在 .husky目录下增加一个commit-msg脚本文件，表示commitlint命令已经成功接入到 husky 的钩子当中，commit 提交时会进行验证

git add -A
// type 提交类型 
// subject 提交说明 
//<type>: <subject>
git commit -m "test: 测试代码"

注意： 冒号:要带空格

相关命令

  • feat: 添加新功能。
  • fix: 修复 Bug。
  • docs: 文档修改。
  • test: 测试
  • refactor: 代码重构。
  • style: 代码格式修改
  • perf: 优化相关，比如提升性能、体验。
  • chore:其他修改, 比如改变构建流程、或者增加依赖库、工具等。
  • build: 编译相关的修改，例如发布版本、对项目构建或者依赖的改动

创建Github远程仓库

创建远程仓库.png

协议选择

如果没有选择协议默认是 No License(None), 这不是代表完全开源, 它表示:  保留你的全部权利。但是如果上传到了 github，那么默认允许他人查看（view）源码、分叉（fork）到自己的仓库，只是不能使用、修改而已。

本地项目 Git 初始化命令

git init
git remote add origin 仓库地址
/** git remote add origin git@github.com:mullore/Blog.git **/

安装vue router定义路由

在src目录下创建 router 文件夹,生成 index.ts 文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/Index'
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});
// 导航守卫
router.beforeEach((to, from, next) => {
  if (to.path !== '/favicon.icon') {
    document.title = to.meta.title ? (to.meta.title as string) : '';
    next();
  }
});

export default router;

配置项目遇到的问题

  • Irregular whitespace not allowed no-irregular-whitespace

快捷键 ctrl+shift+P

image.png

  • Cannot find module '@/xxx' or its corresponding type declarations.Vetur(2307)
#package.json
{
  "compilerOptions": {
    ....
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [...],
}
  • An import path cannot end with a '.ts' extension. Consider importing '@/xx.js' instead.Vetur(2691)
#vite.config.ts
export default defineConfig({
  resolve: {
    extensions: ['.ts', '.mjs', '.js', '.jsx', '.tsx', '.json', '.vue'],
    // 别名配置
    alias: {
      '@': path.join(__dirname, 'src'),
      '@assets': path.join(__dirname, 'src/assets'),
      '@comps': path.join(__dirname, 'src/components'),
      '@utils': path.join(__dirname, 'src/utils'),
      '@router': path.join(__dirname, 'src/router'),
      '@store': path.join(__dirname, 'src/store'),
    },
  },
});
  • typescript报错：Don‘t use {} as a type. {} actually means “any non-nullish value“
// .eslintrc.cjs
"rules": {
    "@typescript-eslint/ban-types": [
      "error",
      {
        "extendDefaults": true,
        "types": {
          "{}": false
        }
      }
    ]
  }
  • Delete ␍eslint 问题解决
vscode 右下角 CRLF 点击该 LF
  • warning Expected 1 line break after opening tag (<button>), but no line breaks found vue/singleline-html-element-content-newline
#.eslintrc.cjs

const INLINE_ELEMENTS = [
  'a',
  'abbr',
  'audio',
   ....
];
module.exports = {
 rules:{
 ...
  //'vue/singleline-html-element-content-newline'：'off',
  'vue/singleline-html-element-content-newline': [
   'error',
   {
     ignoreWhenNoAttributes: true,
     ignoreWhenEmpty: true,
     ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
   },
 ],
}
  • Invalid end tag.vue(23)

image.png

// 在vsocde 设置下搜索 vuetr 选择工作区 settings.json 编辑
{
  ...
  "vetur.validation.template": true
}
avatar
文章
阅读
粉丝