eslint
是检查JavaScript
的,而tslint
是检查typescript
的,当然你也可以在eslint
配置中增加对typescript
的支持,用来检查typescript
。prettier
是用来检查代码风格的,项目中常屏蔽掉tslint
中有关代码规范的规则,这部分交由prettier
校验,tslint
仅仅校验代码功能性错误。
有两种方法可以同时使用Prettier
和tslint
。第一种方法是简单地让每个插件执行其预期的工作:prettier
校验格式和tslint
校验错误。为此,您需要禁用tslint
中检查格式的任何规则,并让Prettier
自动处理所有格式。第二种方法是只用tslint
插件,用tslint
运行prettier
校验格式。
1、tslint插件+prettier插件
在vscode
编辑器中安装tslint
和prettier
插件,并在setting.json
中配置。
tslint
保存时校验配置
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
}
prettier
保存时校验配置
"editor.formatOnSave": true,
使用tslint-config-prettier
关闭tslint
中有关格式的规则,避免tslint
与prettier
在格式规则上产生冲突。
当按ctrl+s
保存代码时,tslint
插件会自动按照默认配置文件(项目根目录下的tslint.json
)检查代码错误,prettier
插件会自动按照默认配置文件(项目根目录下的.prettierrc
)检查代码风格,并自动矫正。
举个例子:
tslint.json
{
"defaultSeverity": "error",
"extends": [
"tslint:latest",
"tslint-react",
"tslint-config-prettier" // 安装tslint-config-prettier后,tslint-config-prettier禁用TSLint的所有格式设置规则, TSLint 和 prettier在代码格式化规则上就不会有冲突了
],
"jsRules": {},
"rules": {
"object-literal-sort-keys": false,
"no-console": true,
"jsx-no-lambda": false,
"no-submodule-imports": false,
"no-implicit-dependencies": false
}
}
.prettierrc
{
"singleQuote": false, // 双引号
"semi": true, // 分号
"endOfLine": "auto"
}
按下CTRL+S
效果
2、tslint插件+tslint-plugin-prettier
这种方式就不需要安装prettier
插件或者关闭prettier
插件,使用tslint
来执行prettier
配置。
安装和配置tslint
插件跟上面一样
安装tslint-plugin-prettier
并在tslint
中进行配置。tslint-plugin-prettier
的作用是将Prettier
作为TSLint
规则运行,并将差异报告为单个TSLint
问题。
对于tslint@^5.2.0
{
"rulesDirectory": ["tslint-plugin-prettier"],
"rules": {
"prettier": true
}
}
对于tslint@^5.0.0
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": true
}
}
如果没有提供选项,它将尝试加载.editorconfig
作为Prettier
的默认选项。
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": true
}
}
如果您不想加载.editorconfig
,请在第三个参数中将其禁用。
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": [true, null, { "editorconfig": false }]
}
}
如果您想指定要使用的配置文件,只需将其路径(相对于process.cwd()
)放在第二个参数中,以下示例说明了如何从中加载配置文件<cwd>/configs/.prettierrc
:
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": [true, "configs/.prettierrc"]
}
}
如果您想手动指定选项,只需在第二个参数中输入“ prettier规则 ”,例如:
{
"extends": ["tslint-plugin-prettier"],
"rules": {
"prettier": [true, { "singleQuote": true }]
}
}
在根目录下创建prettier.json
用于配置格式规则,注意文件名不能用.prettierrc
,不然配置不生效。
prettier.json
{
"singleQuote": false,
"semi": true,
"endOfLine": "auto"
}
tslint.json
{
"defaultSeverity": "error",
"extends": [
"tslint:latest",
"tslint-react",
"tslint-config-prettier" // 安装tslint-config-prettier后,tslint-config-prettier禁用TSLint的所有格式设置规则, TSLint 和 prettier在代码格式化规则上就不会有冲突了
],
"jsRules": {},
"rules": {
"object-literal-sort-keys": false,
"no-console": false,
"jsx-no-lambda": false,
"no-submodule-imports": false,
"no-implicit-dependencies": false,
"prettier": [true, "prettier.json"] // 指定了prettierrc配置文件后,只有第一次CTRL+S保存有用,后续保存都不起作用,原因不明
},
"rulesDirectory": ["tslint-plugin-prettier"]
}
按下CTRL+S效果:
3、补充:如何配置在tslint.json添加注释不会产生警告
在setting.json
中加上如下配置,会以json+comments
模式解析tslint.json
文件
"files.associations": {
"tslint.json": "jsonc"
}
效果:
demo地址:https://github.com/Revelation...
参考:
tslint-plugin-prettier插件使用:https://github.com/prettier/t...
vscode prettier插件:https://marketplace.visualstu...
vscode tslint插件:https://marketplace.visualstu...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。