首页 > 其他分享 >*uniapp-vue3-ts项目配置eslint+prettier+husky

*uniapp-vue3-ts项目配置eslint+prettier+husky

时间:2024-05-06 11:27:40浏览次数:20  
标签:uniapp vue false no ts typescript eslint true

代码检查工具: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

相关文章

  • LeetCode 2597. The Number of Beautiful Subsets
    原题链接在这里:https://leetcode.com/problems/the-number-of-beautiful-subsets/description/题目:Youaregivenanarray nums ofpositiveintegersanda positive integer k.Asubsetof nums is beautiful ifitdoesnotcontaintwointegerswithanabsolut......
  • Oracle【ORA-00600 internal error code arguments [2662]】恢复一例
    背景1.数据库版本:11.2.0.42.未开启归档3.没有备份:无RMAN备份、无DUMP备份4.数据库redolog全部删除。解决思路:Oracle的隐含参数:_allow_resetlogs_corruption=TRUESYS>altersystemset"_allow_resetlogs_corruption"=truescope=spfile;数据库关闭数据库,在启动SQL......
  • “any”类型的参数不可分配给“never”类型的参数。ts(2345)
    问题引入在进行项目开发时,用到了el-tree标签,就是组织树状数据渲染页面,类似菜单,然后父级菜单下会有多个子菜单。本次总共就两层。这里遇到的问题是,后端返回的数据就是一个list,属于叶子节点,父级节点是固定的,需要前端写死,但就在写死了父级节点,并将叶子节点加入到父级节点下后,之前选......
  • TinyVue 3.15.0 正式发布,推出全新的 Charts 图表组件底座,功能更强、图表更丰富!
    你好,我是Kagol。我们非常高兴地宣布,2024年4月8日,TinyVue发布了v3.15.0......
  • CF729B Spotlights 题解
    题目简述给出一个$n$行$m$列的$01$矩阵,定义每个点的价值为上下左右四个方向有$1$的方向数,求所有为$0$的点的价值和。题目分析我们首先可以考虑暴力,但是发现是不行的。于是我们考虑动态规划。设$dp_{i,j,0/1/2/3}$分别表示$(i,j)$这个点上方,左方,下方,右方是否有$......
  • ubuntu_24.04 Noble LTS安装docker desktop启动无窗口及引擎启动失败的解决方法
    ubuntu_24.04LTS安装dockerdesktop启动无窗口及引擎启动失败的解决方法1.安装dockerdesktop后启动无窗口现象:执行sudoaptinstall./docker-desktop-4.29.0-amd64.deb成功安装dockerdesktop后,无论是在菜单里点击DockerDesktop图标还是执行systemctl--userstartdocker......
  • F. Equal XOR Segments
    原题链接题解1.如果能分成偶数个区间,那么一定能分为两个区间2.如果能分为奇数个区间,那么一定能分为三个区间3.能分为两个区间,说明区间异或和为\(0\)4.能分为三个区间,这三个区间分别为区间\(a,b,c\),则\(ab\)区间异或和为零,\(bc\)区间异或和为零code#include<bits/std......
  • CMakeLists.txt --- install使用
    例:cmake_minimum_required(VERSION3.9)project(test)set(CMAKE_BUILD_TYPEDebug)add_library(hahatest.cpp)install(TARGEThahaDESTINATION/home/linxisuo/project/test)install(DIRECTORY${CMAKE_SOURCE_DIR}/testDESTINATION/home/linxisuo)说明:1.安装......
  • Python中出现"No module named 'requests'"的图文解决办法
    第一步第二步第三步第四步第五步 第六步总结第一步找到pycharm中的虚拟环境的位置第二步打开虚拟环境位置的文件夹 找到Scripts的这个文件夹然后复制该文件夹的地址第三步打开“运行”(可以用快捷键WIN+R键打开)然后输入cmd第四步切换目录到虚拟环境......
  • CMakeLists.txt --- 导入接口库(预编译库)
    以接口库的方式导入预编译库cmake_minimum_required(VERSION3.9)project(test)set(CMAKE_BUILD_TYPEDebug)set(CMAKE_C_FLAGS"$ENV{CFLAGS}-O2-Wall-pthread")set(CMAKE_CXX_FLAGS"$ENV{CFLAGS}-O2-Wall-pthread-std=c++11-std=gnu++11")#设置mo......