vscode-eslint的踩坑实践--typescript无法格式化

[jiangjiu]

vscode-eslint的踩坑实践--typescript无法格式化

引言

最近开发的前端项目随着开发的人员越来越多，代码规范已经是一个很难避免的问题了，虽然百度有fecs这个规则检查，但是不论是icode或者是项目本地都没有配置或检查，完全靠自觉，这是件非常扯淡的事。

icode负责人表示暂时没法支持这个，所以看来只能在本地想想办法了。

fecs中的jformater因为不支持自定义格式化调用规则，让fecs使用起来很蛋疼，所以还是选择了主流开源的eslint。

第一步现在本地配置好相关东东，下一步如果有机会的话，会在preCommit时做eslint检查，但是暂时没有项目的控制权，所以看起来也很难实现，不过应该会写写改造方案吧。

eslint

eslint这个库本来是为了实现插件化可扩展而生的，实在不明白为什么fecs还要自己封一次。。。

可以全局安装或者本地项目中安装，编辑器通常会选择本地库优先，本地.eslintrc.js，优先这点很赞。

前几天看到了腾讯alloyteam发了规则包，对每条规则都写了注释，所以就顺手拿来主义了。

https://github.com/AlloyTeam/eslint-config-alloy

规则都写明白了，支持es、ts、vue、react、tsreact几种规则。

小坑

js文件可以直接通过格式化快捷键进行自动修复，ts就是不可以😇.

搜了下vscode-eslint这个库的issues，一开始我以为是global和local安装eslint的问题，也怀疑过是不是alloyTeam的规则extends有问题，但是各种排查，各种最小化，发现是文件格式😂。

目前大部分的规则库给出的配置规则如下：

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "typescript",
        "typescriptreact"
    ]
}

需要注意的是，这里面只有javascript是默认支持自动修复的，其他的并不支持，所以要改成：

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "typescript",
            "autoFix": true
        },
        "typescriptreact"
    ]
}

结论

每一个看似很简单的问题，排查的时候都很难呀😤

[xcatliu]

:+1: