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

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"
    ]
}

结论

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