前言:
eslint 有什么用,我就不说了,看本文的肯定都已经了解了。
本文分为两部分内容;
第一部分讲述开发过程中对代码的语法检测,大部分人呢第一部分就能满足规范需求了;
第二部分讲述代码提交自动检测,不合格且无法自动修复就自动禁止提交!
1、npm install eslint --save-dev
2、npx eslint --init
3、经过上面两个步骤,像我个人此时安装了以下6个开发依赖库了(根据个人选择)
eslint
typescript
eslint-plugin-vue
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
vue-eslint-parser
4、配置 .eslintrc.js .eslintignore
可能有的人文件不是 .eslintrc.js 而是 .eslintrc.cjs 或其他之类的,根据自身情况处理,没啥太大区别。.eslintrc.js 文件内的 eslint 相关检测规则放文章末尾,避免影响接下来的观看。
至此第一部分内容已经结束,想要了解第二部分内容的接着往下看即可。
代码提交自动检测是否正确
以下内容依赖 husky 、lint-staged 这两个npm库。
这两部分内容我就不写了,请查看下面这文章的“方案3” 内容,结合下面的2个步骤进行使用即可!
项目架构:prettier 提交检测、全局||自动格式化代码_oumae-kumiko的博客-CSDN博客
1、package.json 的 script 下增加以下内容
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","lint-fix": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix",
2、package.json 根属性增加以下内容
"lint-staged": {"src/**/*.{js,jsx,vue,ts,tsx}": [......"eslint --fix"]}
eslint 配置规则
module.exports = {root: true, // 若有多个配置规则,向外查找到有 root:true 的时候就终止查找,有多个配置则配置会叠加。env: {// 声明检测哪些环境,比如window不能在node里用,否则会报错等browser: true,// "es6": true,es2021: true,node: true,"vue/setup-compiler-macros": true, // vue setup : eslint 开启 "eslint:recommended" 后需要设置为true},extends: [// 表示使用哪些默认的语法检测配置;数组表示后面的每个配置继承对应前面的配置"eslint:recommended",/**<> 额外插件扩展命名规则: plugin:<包名:省略了前缀,比如vue>/<配置名称:比如recommended> */"plugin:vue/vue3-essential", // 防止错误或意外的行为// "plugin:vue/vue3-strongly-recommended", // 代码风格配置// "plugin:vue/vue3-recommended", // 强制执行主观社区默认值的规则,以确保一致性;这个影响的特别多,要用需要重点针对配置rules。经过测试,该项基本包含了上面2项// "plugin:vue/base", // 好像没啥用。。"plugin:@typescript-eslint/recommended",// '@vue/eslint-config-prettier' // 没啥用],globals: {// true为可读可重写,false只可读,"readonly"也是只可读coustomVar: true, // 意思是全局变量里有 coustomVar ,在X文件中不声明也可以使用 coustomVar// defineProps: "readonly",// defineEmits: "readonly",// defineExpose: "readonly",// withDefaults: "readonly"},parser: "vue-eslint-parser",parserOptions: {// 解析的语法环境有哪些ecmaVersion: "latest",parser: "@typescript-eslint/parser",sourceType: "module",// 允许解析JSXecmaFeatures: {jsx: true,},},plugins: ["vue", "@typescript-eslint"],/*** off 关闭检验* warn 代码问题警告* error 代码错误警告*/rules: {/** @js */quotes: ["off", "double"], // single 单引号; double 双引号; backtick 反斜杠"prefer-const": "off", // 未修改变量 > 报错提示用 consot"no-console": "off", // 必关,console代码什么的,打包的时候配置删掉就行了,源代码肯定要留着,但要控制整洁,别没啥用的都留着"no-debugger": "error", // 必开,打了断点的,注意关了!"no-redeclare": "warn", // 避免引入外部文件导致提交代码失败"no-self-assign": "warn", // 避免引入外部文件导致提交代码失败/** @vue */// "vue/require-v-for-key": "error","vue/multi-word-component-names": "off", // 关闭 kebab cased 风格警告!这风格一点也不好!!名字统一不变才是王道。/** @typescript */"@typescript-eslint/ban-types": "warn","@typescript-eslint/no-inferrable-types": "off", // 开启后:可轻松推断的TS显示类型不需要主动声明"@typescript-eslint/no-explicit-any": "off", // 开启后:不允许使用 any 类型"@typescript-eslint/no-unused-vars": "off", // 开启后:声明了未使用,则提示报错 // 建议warn ,自己练习的项目,所以先关了"@typescript-eslint/no-empty-function": "error", // 禁止空函数。(函数内没任何内容)},
};
下一篇:Java之语法糖