代码检查工具:Eslint
代码格式化工具:prettier
husky:Git 客户端增加了钩子(hooks)功能,使得在特定阶段执行一系列流程,以保证每一个 commit 的正确性
vscode 安装插件:
安装 eslint + prettier:
npm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig
根目录/新建 .eslintrc.cjs 文件:
/* eslint-env node */ require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { root: true, extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier'], // 小程序全局变量 globals: { uni: true, wx: true, WechatMiniprogram: true, getCurrentPages: true, getApp: true, UniApp: true, UniHelper: true, App: true, Page: true, Component: true, AnyObject: true, }, parserOptions: { ecmaVersion: 'latest', }, // rules: { // 'prettier/prettier': [ // 'warn', // { // singleQuote: true, // semi: false, // printWidth: 100, // trailingComma: 'all', // endOfLine: 'auto', // }, // ], // 'vue/multi-word-component-names': ['off'], // 'vue/no-setup-props-destructure': ['off'], // 'vue/no-deprecated-html-element-is': ['off'], // '@typescript-eslint/no-unused-vars': ['off'], // }, /* * 'off' 或 0 ==> 关闭规则 * 'warn' 或 1 ==> 打开的规则作为警告(不影响代码执行) * 'error' 或 2 ==> 规则作为一个错误(代码不能执行,界面报错) */ rules: { // typeScript (https://typescript-eslint.io/rules) '@typescript-eslint/no-unused-vars': 2, // 禁止定义未使用的变量 '@typescript-eslint/prefer-ts-expect-error': 2, // 禁止使用 @ts-ignore '@typescript-eslint/no-explicit-any': 0, // 禁止使用 any 类型 '@typescript-eslint/no-non-null-assertion': 0, '@typescript-eslint/no-namespace': 0, // 禁止使用自定义 TypeScript 模块和命名空间。 '@typescript-eslint/semi': 0, 'no-prototype-builtins': 0, // 可以使用obj.hasOwnProperty() '@typescript-eslint/no-var-requires': 0, // 不允许在import 中使用require '@typescript-eslint/no-empty-function': 2, // 关闭空方法检查 // eslint-plugin-vue (https://eslint.vuejs.org/rules/) 'vue/multi-word-component-names': 0, // 要求组件名称始终为 “-” 链接的单词 'vue/script-setup-uses-vars': 2, // 防止<script setup>使用的变量<template>被标记为未使用 'vue/no-mutating-props': 0, // 不允许组件 prop的改变 'vue/no-v-html': 0, // 禁止使用 v-html 'vue/no-setup-props-destructure': 0, // 禁止 props 解构传递给 setup 'vue/no-v-model-argument': 0, // 不允许添加要在 v-model 自定义组件中使用的参数 'vue/component-definition-name-casing': [2, 'PascalCase'], // 强制使用组件定义名称的特定大小写 PascalCase | kebab-case 'vue/attribute-hyphenation': [2, 'always', { ignore: [] }], // 对模板中的自定义组件强制实施属性命名样式 'vue/no-dupe-keys': [2, { groups: [] }], // 不允许重复字段名称 'vue/no-dupe-v-else-if': 2, // 不允许 / v-else-if 链中的 v-if 重复条件 'vue/no-duplicate-attributes': 2, // 禁止属性重复 'vue/no-ref-as-operand': 2, // 使用ref对象必须.value 'vue/first-attribute-linebreak': [ 2, { singleline: 'ignore', multiline: 'below', }, ], // 强制设置第一个属性的位置 '@typescript-eslint/no-this-alias': [ 'warn', { allowDestructuring: false, // Disallow `const { props, state } = this`; true by default allowedNames: ['_this'], // this的別名可以为_this }, ], // eslint(https://eslint.bootcss.com/docs/rules/) 'no-unexpected-multiline': 2, // 禁止空余的多行 'no-await-in-loop': 2, // 该规则不允许在循环体中使用 await 'no-dupe-else-if': 2, // 禁止 if-else-if 链中的重复条件 'no-const-assign': 2, // 禁止重新分配 const 变量 'no-dupe-keys': 2, // 禁止对象字面量中的重复键 'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行 'no-unused-vars': 2, // 禁止未使用的变量 'use-isnan': 2, // 检查 NaN 时需要调用 isNaN() 'valid-typeof': 2, // 强制将 typeof 表达式与有效字符串进行比较 'no-var': 2, // 要求使用 let 或 const 而不是 var 'no-extra-semi': 2, // 禁止不必要的分号 'no-multi-str': 2, // 禁止多行字符串 'no-unused-labels': 2, // 禁止未使用的标签 // 在打开数组括号之后和关闭数组括号之前强制换行 'array-bracket-newline': [2, 'consistent'], eqeqeq: [2, 'smart'], // 必须使用全等 'arrow-spacing': 2, // 在箭头函数中的箭头前后强制执行一致的间距 // 在函数调用的参数之间强制换行 'function-call-argument-newline': [2, 'consistent'], 'no-undef': 2, // 禁止使用未声明的变量,除非在 /*global */ 注释中提及 complexity: [2, 15], indent: [2, 4, { SwitchCase: 1 }], 'valid-jsdoc': 0, //jsdoc规则 'no-console': process.env.NODE_ENV === 'production' ? 2 : 0, 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'no-useless-escape': 0, // 禁止不必要的转义字符 '@typescript-eslint/ban-types': 0, // 允许使用function 声明函数 'prettier/prettier': [ 1, { //在单独的箭头函数参数周围包括括号 always:(x) => x \ avoid:x => x arrowParens: 'always', // 开始标签的右尖括号是否跟随在最后一行属性末尾,默认false bracketSameLine: false, // 对象字面量的括号之间打印空格 bracketSpacing: true, // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto) embeddedLanguageFormatting: 'auto', // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css) htmlWhitespaceSensitivity: 'ignore', // 一行最多多少个字符 printWidth: 150, // 超出打印宽度 (always | never | preserve ) proseWrap: 'preserve', // 对象属性是否使用引号(as-needed | consistent | preserve; quoteProps: 'as-needed', // 指定要使用的解析器,不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 最后不需要引号 semi: false, // 使用单引号 (true:单引号;false:双引号) singleQuote: true, // 缩进空格数,默认2个空格 tabWidth: 4, // 多行时尽可能打印尾随逗号。 trailingComma: 'es5', // 使用制表符而不是空格缩进行 useTabs: false, // Vue文件脚本和样式标签缩进 vueIndentScriptAndStyle: false, // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>" endOfLine: 'auto', }, ], }, }
根目录/新增.eslintignore忽略文件:
dist node_modules
配置 package.json:
{ "script": { // ... 省略 ... "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore" } } # or "scripts": { "lint": "eslint src", "fix": "eslint src --fix", }
根目录/新增.prettierrc.json并添加规则:
{ "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "none", "bracketSpacing": true, "bracketSameLine": true, "arrowParens": "always", "htmlWhitespaceSensitivity": "ignore", "vueIndentScriptAndStyle": false, "endOfLine": "auto", "singleAttributePerLine": false }
// prettier 配置详解 { "printWidth": 100, //每行最多显示的字符数 "tabWidth": 2,//tab的宽度 2个字符 "useTabs": false,//禁止使用tab代替空格 "semi": true,//结尾使用分号 "singleQuote": true,//使用单引号代替双引号 "trailingComma": "none",//结尾是否添加逗号 "bracketSpacing": true,//对象括号俩边是否用空格隔开 "bracketSameLine": true,;//组件最后的尖括号不另起一行 "arrowParens": "always",//箭头函数参数始终添加括号 "htmlWhitespaceSensitivity": "ignore",//html存在空格是不敏感的 "vueIndentScriptAndStyle": false,//vue 的script和style的内容是否缩进 "endOfLine": "auto",//行结尾形式 mac和linux是\n windows是\r\n "singleAttributePerLine": false //组件或者标签的属性是否控制一行只显示一个属性 }
根目录/新增.prettierignore忽略文件:
/dist/* /html/* .local /node_modules/** **/*.svg **/*.sh /public/*
安装并husky:
1.初始化git
git init
2.安装
npm install -D husky
3.初始化 husky 会生成 .husky 文件
npx husky-init
4.安装 lint-staged (检测暂存区中的文件:Lint-staged会自动检查暂存区中的文件,确保它们符合团队的编码规范)
npm i -D lint-staged
5.配置 package.json
{ "script": { // ... 省略 ... }, "lint-staged": { "*.{vue,ts,js}": ["eslint --fix"] } }
6.修改 .husky/pre-commit 文件
#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npm run lint-staged
npm run lint 去检测语法
npm run fix 如果出现不规范格式,通过指令修改
标签:uniapp,vue,false,no,ts,typescript,eslint,true From: https://www.cnblogs.com/qianduan-lucky/p/18174628