vscode无法格式化.tsx .ts .less 文件

问题描述

最近升级了vscode,然后发现保存代码时不能自动格式化,（以前配置了保存修复之后，react、vue项目保存都可以自动格式化）如下效果。

      if (item.children.length) {
                   return (
          <SubMenu key={`${item.url.toString()}`} title={item.menuName}>
                         {handlSiderMenuDom(item.children)}
                   </SubMenu>
        );
      }

百度后 尝试如下方法（均失败）

方法一：插件各种升级

以为只有vscode升级了，其余插件没升级，导致的这个问题，所以重装了eslint 、Prettier，然而一点作用都没有。

方法二：开启自动保存功能

或者直接在scode中的setting.json文件做如下设置

  "editor.formatOnSave": true,

方法三：配置vscode中的setting.json文件

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

没有效果且还有警告。警告是因为[] 内的类型定义的是string。

还有一种说法说因为vscode升级，弃用eslint.validate属性配置。改用"editor.codeActionsOnSave"这个属性，所以有了下面的方法

方法四：配置新属性

  "editor.codeActionsOnSave": {
    // #每次保存的时候将代码按eslint格式进行修复
    "source.fixAll.eslint": true,
    "eslint.autoFixOnSave": true
  },

配置了新属性后依旧无效。。。。

冷静了一会儿。

敲了几行代码。。

妹的 。。。

太丑了。。。。

忍不了。。。。。

然后有各种把vacode中关于save \ format \ fix 之类的设置全部设置为true,还是没有效果。

站在崩溃的边缘。。。。。。

最后的 最后 我觉得要去看官方配置文档的时候，发现了配置文件里，如下的配置属性，看着像格式化的配置，而且貌似只对vue和javascript做了配置。

所以又去找了下editor.defaultFormatter这个属性的配置，上面的配置大概意思是用prettier对指定文件类型进行格式化。

看着好像可以加点什么的样子，然后修改加了一行代码。

完美搞定。整齐的代码又回来了，开开心心敲代码。