vscode-eslint的踩坑實踐--typescript沒法格式化

時間 2019-12-05

標籤 vscode eslint 實踐 typescript 沒法格式化简体版

原文原文鏈接

vscode-eslint的踩坑實踐--typescript沒法格式化

引言

最近開發的前端項目隨着開發的人員愈來愈多，代碼規範已是一個很難避免的問題了，雖然百度有fecs這個規則檢查，可是不管是icode或者是項目本地都沒有配置或檢查，徹底靠自覺，這是件很是扯淡的事。javascript

icode負責人表示暫時無法支持這個，因此看來只能在本地想一想辦法了。html

fecs中的jformater由於不支持自定義格式化調用規則，讓fecs使用起來很蛋疼，因此仍是選擇了主流開源的eslint。前端

第一步如今本地配置好相關東東，下一步若是有機會的話，會在preCommit時作eslint檢查，可是暫時沒有項目的控制權，因此看起來也很難實現，不過應該會寫寫改造方案吧。vue

eslint

eslint這個庫原本是爲了實現插件化可擴展而生的，實在不明白爲何fecs還要本身封一次。。。java

能夠全局安裝或者本地項目中安裝，編輯器一般會選擇本地庫優先，本地.eslintrc.js，優先這點很贊。react

前幾天看到了騰訊alloyteam發了規則包，對每條規則都寫了註釋，因此就順手拿來主義了。git

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

規則都寫明白了，支持es、ts、vue、react、tsreact幾種規則。typescript

小坑

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