VSCode 插件之 Prettier

prettier-vscode

github.com/prettier/pr…

prettier-resolution

prettier-vscode 插件将使用当前项目本地依赖中的 prettier（推荐）。当 prettier.resolveGlobalModules 被设置为 true 时（settings.json），prettier-vscode 插件也可以尝试解析全局 prettier。如果本地依赖和全局都没有安装 prettier，那么将使用 prettier-vscode 插件捆绑的 prettier。

Configuration

有多种方式可以配置 prettier 的格式化选项。你可以使用 VSCode settings.json、prettier 配置文件或 .editorconfig 文件。VSCode settings.json 是用来作为备用的，通常只用于非项目文件，不能用于 prettier CLI。建议你总是在项目中包含一个 prettier 配置文件，这将确保无论你以何种方式运行 prettier（通过 prettier-vscode 插件 or prettier CLI [prettier --single-quote ]），都将应用同样的格式化选项。

推荐使用 prettier 配置文件来设置格式化选项。如果你想将 prettier 的格式化选项应用于整个项目，只需在项目根目录下添加一个 prettier 配置文件即可。

Settings

• Prettier Settings ：所有的 prettier 选项都可以直接在插件中进行配置（settings.json），这些配置的默认值始终是 prettier 2.0的默认值。

  prettier.arrowParens: "always"
  prettier.bracketSpacing: true
  prettier.endOfLine: "lf"
  prettier.htmlWhitespaceSensitivity: "css"
  prettier.insertPragma: false
  prettier.jsxBracketSameLine: false
  prettier.jsxSingleQuote: false
  prettier.printWidth: 80
  prettier.proseWrap: "preserve"
  prettier.quoteProps: "as-needed"
  prettier.requirePragma: false
  prettier.semi: true
  prettier.singleQuote: false
  prettier.tabWidth: 2
  prettier.trailingComma: "es5"
  prettier.useTabs: false
  prettier.vueIndentScriptAndStyle: false
  prettier.embeddedLanguageFormatting: auto
  

• Extension Settings：这些设置是 VSCode 特有的，需要在 settings.json 中进行设置。

  • prettier.enable (default: true)

    控制是否启用 prettier 插件。当你改变这个设置时，你必须重新启动 VSCode。

  • prettier.prettierPath

    提供一个到 npm prettier 包的自定义路径。这个路径应该是模块文件夹，而不是 bin/script 路径，即 ./node_modules/prettier，而不是 ./bin/prettier。

  • prettier.resolveGlobalModules (default: false)

    启用后，如果没有本地依赖，该插件将尝试使用全局 npm 或 yarn 模块。

  • prettier.useEditorConfig (default: true)

    是否在解析配置时考虑到 .editorconfig。

  • 其余配置见官网

VSCode 安装的 eslint 和 prettier 插件和 npm 安装的有什么区别

VSCode 中安装的是在编辑器里面用的，如果项目根目录下有 eslintrc 和 prettierrc 配置文件，VSCode 插件会自动读取配置文件中的配置检查你的代码和格式化文件，npm 安装的是在命令行中运行的。如果你只安装 npm 包，VSCode 是不会有 lint 提示的，只能通过命令行，在小黑窗查看不符合 lint 规则的检测信息。安装 npm 包最主要的原因是可以通过 git hook 强制提交代码前 lint 和格式化代码保证代码仓库的代码风格统一。

如何在 VSCode 中使用 prettier 格式化代码？

• 首先在 VSCode 安装 prettier 插件。

• 配置插件 prettier

  通过 VSCode -> 首选项 -> 设置（settings.json），可配置 VSCode 编辑器的默认格式化工具，也可根据语言设置其对应的默认格式化工具。

  {
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置编辑器的默认格式化工具为 prettier
    "[javascript]": { // 根据语言设置其对应的默认格式化工具
        "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置 javascript 的默认格式化工具为 prettier
        "editor.formatOnSave": true, // 保存的时候自动格式化
    },
  }
  

• 我们还可以在 settings.json 进行 prettier 选项的配置，这些配置会覆盖 prettier-vscode 插件捆绑的 prettier 的默认格式化选项。

  {
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置 javascript 的默认格式化工具为 prettier
        "editor.formatOnSave": true, // 保存的时候自动格式化
    },
    // prettier 选项配置
    "prettier.semi": false, // 语句末尾添加分号
    "prettier.singleQuote": true // 使用单引号
  }
  

• 测试：

  • 如果当前项目本地依赖没有安装 npm prettier 包，也没有 prettier 配置文件，那么 VSCode 会使用 prettier-vscode 插件捆绑的 prettier 的默认格式化选项 + settings.json 中的 prettier 格式化选项，如下图。

    

    格式化前后对比：去掉了分号（semi: false）；使用单引号（singleQuote: true）；对象最后一个属性加上逗号（trailingComma: "es5"）；我本地使用的 prettier-vscode 插件捆绑的 prettier 版本大于 v2.0.0，因此 trailingComma 的默认值是 es5，所以会在对象最后一个属性加上逗号。

    // test-prettier.js 格式化前
    function test() {
      const obj = {
        a: 1,
        b: 2
      };
      const str = 1;
      if (str == "1") {
        return true;
      }
    }
    test();
    
    // test-prettier.js 格式化后
    function test() {
      const obj = {
        a: 1,
        b: 2,
      }
      const str = 1
      if (str == '1') {
        return true
      }
    }
    test()
    

  • 如果当前项目本地依赖安装了 npm prettier 包，但是没提供 prettier 配置文件，那么 VSCode 会使用 prettier-vscode 插件捆绑的 prettier 的默认格式化选项 + settings.json 中的 prettier 格式化选项（同上），如下图。

    

    格式化前后对比：去掉了分号（semi: false）；使用单引号（singleQuote: true）；对象最后一个属性加上逗号（trailingComma: "es5"）；我本地依赖安装的 prettier 版本是 1.17.1，这个版本的 trailingComma 默认值是 none，而打印出来的 trailingComma 却是 es5，并且最终在对象最后一个属性加上了逗号，由此得知 VSCode 使用的是 prettier-vscode 插件捆绑的 prettier 的默认格式化选项 + settings.json 中的 prettier 格式化选项。

    // main.js 格式化前
    import Vue from "vue";
    import App from "./App";
    import router from "./router";
    
    Vue.config.productionTip = false;
    
    /* eslint-disable no-new */
    new Vue({
      el: "#app",
      router,
      render: h => h(App)
    });
    
    // main.js 格式化后
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      render: (h) => h(App),
    })
    

  • 如果当前项目本地依赖安装了 npm prettier 包，也提供了 prettier 配置文件，那么 VSCode 会使用 npm prettier 包的默认格式化选项 + prettier 配置文件中的格式化选项，忽略 settings.json 中的 prettier 格式化选项，如下图。

    格式化前后对比：去掉了分号（semi: false）；使用单引号（singleQuote: true）；对象最后一个属性去掉逗号（trailingComma: "none"）；我本地依赖安装的 prettier 版本是 1.18.2，这个版本的 trailingComma 默认值是 "none"，prettier-vscode 插件捆绑的 prettier 版本是 2.2.0，这个版本的 trailingComma 默认值是 "es5"，最终在对象最后一个属性去掉了逗号，由此得知 VSCode 使用的是 npm prettier 包的默认格式化选项 + prettier 配置文件中的格式化选项。

    // main.js 格式化前
    import Vue from "vue";
    import App from "./App";
    import router from "./router";
    
    Vue.config.productionTip = false;
    
    /* eslint-disable no-new */
    new Vue({
      el: "#app",
      router,
      render: h => h(App),
    });
    
    // main.js 格式化后
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })
    

    注意：trailingComma: "es5" 只会在多行对象的最后一个属性加上逗号，单行的对象不会加。

    const obj1 = {
      a: 1,
      b: 2   // 会加逗号
    }
    const obj2 = { a: 1, b: 2 } // 不会加逗号
    

  • 如果当前项目本地依赖没有安装 npm prettier 包，但是提供了 prettier 配置文件，那么 VSCode 会使用 prettier-vscode 插件捆绑的 prettier 的默认格式化选项 + prettier 配置文件中的格式化选项，忽略 settings.json 中的 prettier 格式化选项，如下图。

    

    格式化前后对比：去掉了分号（semi: false）；使用单引号（singleQuote: true）；删掉花括号两边的空格（bracketSpacing: false）；

    // main.js 格式化前
    import Vue from "vue";
    import App from "./App";
    import router from "./router";
    
    Vue.config.productionTip = false;
    
    /* eslint-disable no-new */
    new Vue({
      el: "#app",
      router,
      render: h => h(App)
    });
    
    // main.js 格式化后
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      render: (h) => h(App),
    })
    

  • 总结

    • 无 npm 包无配置文件，使用捆绑 prettier + settings.json。
    • 有 npm 包无配置文件，使用捆绑 prettier + settings.json。
    • 有 npm 包有配置文件，使用npm prettier + 配置文件。
    • 无 npm 包有配置文件，使用捆绑 prettier + 配置文件。