赞
踩
eslint:运行代码前检查语法、潜在bug等
prettier:代码格式化工具,例如检查缩进长度是4格还是2格,表达式,逗号等等
pnpm安装命令(包含了依赖的所有包):
pnpm install eslint eslint-plugin-vue eslint-config-prettier prettier eslint-plugin-import eslint-plugin-prettier eslint-config-airbnb-base -D
pnpm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-alias @types/eslint @types/node -D
安装成功示例:
2022年10月11日18:21
+ prettier 2.7.1:prettier核心代码库
+ eslint 8.25.0 :ESlint核心代码库
+ eslint-config-airbnb-base 15.0.0 :airbnb的代码规范(依赖eslint-plugin-import )
+ eslint-config-prettier 8.5.0 :eslint 结合prettier的格式化
+ eslint-plugin-import 2.26.0 :项目里支持eslint
+ eslint-plugin-prettier 4.2.1 : 将prettier结合进入eslint的插件
+ eslint-plugin-vue 9.6.0 :eslint在vue里的代码规范+ @types/eslint 8.4.6
+ @types/node 18.8.4
+ @typescript-eslint/eslint-plugin 5.40.0 :ESLint插件,包含各类定义好的检测ts代码的规范
+ @typescript-eslint/parser 5.40.0 : ESLint的解析器,用于解析ts,从而检查和规范ts代码
+ eslint-import-resolver-alias 1.1.2 :让我们在import的时候可以使用@别名2022年10月11日 20:19
发现还需要安装一个包 :eslint/create-config
同时要配合安装 VSCode插件:
1.ESLint
2.Prettier - Code fromatter
可以在package.json中配置一个新的脚本命令 :"lint:create": "eslint --init"
执行配置的命令,或者直接执行eslint --init,根据提示选择需要的一些规则配置
随后能看到目录中自动增加了一个eslintrc.cjs的配置文件。
在文件中可进行详细的规则配置
- module.exports = {
- // 检测环境 ,浏览器、es、node
- "env": {
- "browser": true,
- "es2021": true,
- "node": true
- },
-
- // 用了哪些别人定义好的规则
- extends: ['plugin:vue/vue3-strongly-recommended', 'airbnb-base', 'prettier'],
- // "extends": [ "eslint:recommended","plugin:vue/essential","plugin:@typescript-eslint/recommended"],
- // ESLint 会对我们的代码进行校验,而parser的作用是将我们写的代码转换为ESTree(AST),ESLint 会对ESTree进行校验
- parser: "vue-eslint-parser",
- // 解析器配置
- "parserOptions": {
- // es的版本号,或者年份都可以,latest代表"最近的"
- "ecmaVersion": "latest",
- "parser": "@typescript-eslint/parser",
- // 源码类型,默认是script,es模块使用module
- "sourceType": "module",
- // 额外的语言类型
- ecmaFeatures:{
- tsx:true,
- jsx:true
- },
- },
- // 全局自定义的宏,这样在源文件中使用全局变量就不会报错或者警告
- globals:{
- defineProps:"readonly",
- defineEmits:"readonly",
- defineExpose:"readonly",
- withDefaults:"readonly"
- },
-
- // 插件
- // 前缀eslint-plugin- 可以省略
- // vue官方提供了一个ESLint插件 eslint-plugin-vue,它提供了 parser 和 rules
- // parser为vue-eslint-parser,放在上面的parser字段里
- // rules放在extends字段里,选择合适的规则
- "plugins": [
- "vue",
- "@typescript-eslint"
- ],
- settings:{
- "import/resolver":{
- alias:{
- map:[["@","./src"]]
- }
- },
- // 允许的扩展名
- "import/extensions":[".js",".jsx",".ts",".tsx",".mjs"]
- },
- // 自定义规则,覆盖上面extends继承的第三方规则,根据自己项目灵活定义
- "rules": {}
- }
其中,rules是自定义规则
但自定义规则中可以写些什么?参考什么写?
暂时没找到,有人知道吗?评论区求指点
需要在package.json中,增加一个脚本命令:
"lint":"eslint \"src/**/*.{js,vue,ts}\" --fix"
执行lint的时候,就会自动检测出格式有问题的代码,甚至会自动修复
例如你写了:a = a+1
控制台执行lint的时候,a += 1
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。