[muzzik 分享]：typescript-eslint 太香了

Creator 3.x
#1

image
image987×767 38.1 KB

晚上试用了一下，
竟然支持我最爱的蛇形命名法

typescript-eslint + prettier = YYDS

配置如下，需要的可以根据自己习惯自行调整
规则说明：https://typescript-eslint.io/rules/

package.json

{
	"type": "module",
	"devDependencies": {
		"@typescript-eslint/eslint-plugin": "^5.34.0",
		"@typescript-eslint/parser": "^5.34.0",
		"eslint": "^8.22.0",
		"eslint-config-prettier": "^8.5.0",
		"eslint-plugin-prettier": "^4.2.1",
		"typescript": "^4.7.4"
	}
}

.eslintrc（注意前面有个点）

/**
 * "off" 或 0 - 关闭规则
 * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
 * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
 */
{
	"parser": "@typescript-eslint/parser",
	"parserOptions": {
		"requireConfigFile": false,
		"ecmaVersion": 6,
		"sourceType": "module",
		"project": "./tsconfig.json"
	},
	"plugins": ["@typescript-eslint", "eslint-plugin-prettier"],
	"extends": ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
	"env": {
		"browser": true,
		"node": true
	},
	"globals": {},
	"rules": {
		"@typescript-eslint/naming-convention": [
			"error",
			{
				"selector": "variableLike",
				"format": ["snake_case"],
				"trailingUnderscore": "allowSingleOrDouble"
			}
		],
		"@typescript-eslint/no-namespace": "off"
	}
}

.eslintignore

node_modules/

需要安装的需要把上面几个文件的内容复制到自己项目中，然后再 npm i ，再安装 vscode 内的 eslint 插件后重启 vscode 就行了

9赞
大家对typescript代码书写风格有什么自己的见解吗
#2

补充（要求 private / protected 成员必须带下划线前缀）：

{
	"rules": {
		// 命名规则
		"@typescript-eslint/naming-convention": [
			"error",
			// 强制 private 成员带下划线前缀
			{
				"selector": "memberLike",
				"modifiers": ["private"],
				"format": ["snake_case"],
				"leadingUnderscore": "require"
			},
			// 强制 protected 成员带下划线前缀
			{
				"selector": "memberLike",
				"modifiers": ["protected"],
				"format": ["snake_case"],
				"leadingUnderscore": "require"
			}
		]
	}
}
1赞
#3

我以为自己算代码比较规范了，一开这tslint报了几百个错，还是关了新项目在用吧 :rofl:

#4

是比较适合新项目，老项目除非重构，就别用

#5

大佬还差两个包

  • husky: 负责 git-hooks 处理，在每次 commit 前自动执行 eslint 进行检查
  • lint-staged: 负责仅针对本次 git 里面待提交区（staged）的内容进行检查，避免每次花费大量时间对所有文件进行 eslint 检查
#7

我们一直都在用这样子的配置来进行多人开发

image
image851×319 48.6 KB

#9

)P4ADB{_W@7$Q0%H71W9E
开了这俩每次提交至少几分钟，后面把命令删掉了

#10

我觉得可能是因为你还没有创建好 pre-commit 文件及指定其命令

更新 pre-commit （路径：.husky/pre-commit ）文件的内容

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# 这样子写，每次提交都会对所有文件进行 lint 检查，会很耗时
# npm run lint

# 这样子写，只针对git里面待提交区（staged）的代码进行 lint 检查，相比起上面会更加省时
npm run lint-staged

然后配置一下 package.json 即可

image

#11

X}G7IRS2_OHNQ)9J7`NF8
X}G7IRS2_OHNQ)9J7`NF8861×290 10.2 KB

才发现我们项目里面有两行 npx lint-staged，可能是这个原因

#12

U(UNMCYQ3O5EH~WI4Y5S3P
这是我们项目之前的命令，npm run eslint 和 eslint 应该没什么区别吧？

#13

我看 lint-staged 的教程 是这样子写的： :rofl:

image
image950×235 21.7 KB

#15

重新测试了下，一个 ts 文件耗时提交几乎耗时一分钟，不执行 eslint 只需要十秒左右

package.json

"husky": {

        "hooks": {

            "pre-commit": "lint-staged"

        }

    },

    "lint-staged": {

        "./assets/**/*.ts": [

            "npm run eslint"

        ]

    },

    "name": "billiards_client",

    "scripts": {

        "eslint": "eslint ./assets/ --ext .ts --fix",

        "prepare": "husky install",

        "prettier": "prettier --config .prettierrc.js --write ./assets/**/*.ts"

    },

pre-commot

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

看看有问题吗？

#16

如果我上面配置没问题的话，那么仅仅为了不符合 eslint 规则时不能提交的功能，而消耗提交时几倍于平常的时间，我觉得并不值得，并且开发时不符合 eslint 规则时也会报错，除非开发人员是个小白，不然都会解决报错的

#17

解决方案

package.json需要改一下：

修改前：

"lint-staged": {
    "./assets/**/*.ts": [
        "npm run eslint"
    ]

修改后：

"lint-staged": {
    "./assets/**/*.ts": "eslint"
}

原因分析

这是因为修改前，lint-staged 阶段，你是执行 npm run eslint ，而这个命令对应的是你在 package.json 里面指定执行的命令

"scripts": {
    "eslint": "eslint ./assets/ --ext .ts --fix",
}

也即是针对整个 assets 做了一次 eslint 那么耗时就比较长了

修改后的代码意思是 eslint 本次待提交区内，并且还是在属于这个范围内的文件 ./assets/**/*.ts

因为检查的文件比较少，只是你本次提交的文件（当然，如果你一次提交100多个 ts 文件，那么估计还是有一定耗时），所以实际应该不会占用很长时间

2赞
#18

解决了，谢谢大佬

#19

eslint + husky + lint-staged 确实很香 :grin:

1赞
#20

啥玩意 代码不是各有各的特点吗 :rofl:

#21

工程配置分享也是很有用的东西，不光是lint

#22

自己项目根据自己风格配不就行了，我这个帖子也不是想要你们用我的配置，而是分享一些个人觉得实用的配置，用不用看自己

#23

感觉这样很棒！无法通过代码检查还不能提交。
楼主能否分享下现在最新的 eslint + husky + lint-staged 配置