不要 .prettierrc*

直接参考如下 settings.json 配置

  1. {
  2.   "search.exclude": {
  3.     "**/node_modules": true
  4.   },
  6.   //-------- Files configuration --------
  8.   // Configure glob patterns for excluding files and folders.
  9.   "files.exclude": {
  10.     "**/*.swn": true,
  11.     "**/*.swo": true,
  12.     "**/*.swp": true,
  13.     "**/node_modules": true,
  14.     "**/.git": true,
  15.     "**/.DS_Store": true,
  16.     "**/.sass-cache/": true,
  17.     "**/*.map": true,
  18.     "**/packages": true
  19.   },
  21.   // "eslint.validate": [
  22.   //   "javascript",
  23.   //   "javascriptreact",
  24.   //   "typescript",
  25.   //   "typescriptreact",
  26.   //   "css",
  27.   //   "scss",
  28.   //   "sass"
  29.   // ],
  30.   // "[css, scss]": {
  31.   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  32.   // },
  33.   // "[javascript]": {
  34.   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  35.   // },
  36.   // "[javascriptreact]": {
  37.   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  38.   // },
  39.   // "[typescriptreact]": {
  40.   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  41.   // },
  42.   "editor.formatOnSave": true,
  43.   "editor.formatOnType": true,
  44.   "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  47.   // "editor.formatOnType": true,
  48.   // "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  49.   "editor.defaultFormatter": "esbenp.prettier-vscode",
  50.   // "eslint.enable": true,
  51.   // "[html]": {
  52.   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  53.   // },
  54.   // "[javascript]": {
  55.   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  56.   // }
  57.   /*  prettier的配置 */
  58.   "prettier.printWidth": 160,                // 超过最大值换行
  59.   "prettier.tabWidth": 2,                    // 缩进字节数
  60.   "prettier.useTabs": false,                 // 缩进不使用tab，使用空格
  61.   "prettier.semi": true,                     // 句尾添加分号
  62.   "prettier.singleQuote": true,              // 使用单引号代替双引号
  63.   "prettier.jsxSingleQuote": true,           // 在jsx中使用单引号代替双引号
  64.   // "prettier.proseWrap": "preserve",       // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  65.   // "prettier.arrowParens": "avoid",        //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  66.   "prettier.bracketSpacing": true,           // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  67.   // "prettier.disableLanguages": ["vue"],   // 不格式化vue文件，vue文件的格式化单独设置
  68.   // "prettier.endOfLine": "auto",           // 结尾是 \n \r \n\r auto
  69.   // "prettier.eslintIntegration": false,    // 不让prettier使用eslint的代码格式进行校验
  70.   // "prettier.htmlWhitespaceSensitivity": "ignore",
  71.   "prettier.ignorePath": ".prettierignore",  // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  72.   "prettier.jsxBracketSameLine": false,      // 在jsx中把'>' 是否单独放一行
  73.   "prettier.parser": "babel",                // 格式化的解析器，默认是babylon
  74.   // "prettier.requireConfig": false,        // Require a 'prettierconfig' to format prettier
  75.   // "prettier.stylelintIntegration": false, // 不让prettier使用stylelint的代码格式进行校验
  76.   "prettier.trailingComma": "all"            // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  77.   // "prettier.tslintIntegration": false     // 不让prettier使用tslint的代码格式进行校验
  78. }

局部禁用

  1.     // prettier-ignore
  2.     x = '' +
  3.     '<div id="welfare-modal-purchase">' +
  4.       '<div class="hb-modal-mask"></div>' +
  5.       '<div class="hb-modal-wrap">' +
  6.         '<div class="hb-modal" style="' + config.width + 'px">' +
  7.           '<div class="hb-modal-content">' +
  8.             '<div class="hb-modal-close hb-modal-btn-close"></div>' +
  9.             '<div class="hb-modal-header">' +
  10.               '<div class="hb-modal-title">' + config.title + '</div>' +
  11.             '</div>' +
  12.             '<div class="hb-modal-body"></div>' +
  13.             '<div class="hb-modal-footer">' +
  14.               '<div class="hb-btn cancel hb-modal-btn hb-modal-btn-close">取消</div>' +
  15.               '<div class="hb-btn primary hb-modal-btn hb-modal-btn-confirm">确认</div>' +
  16.             '</div>' +
  17.           '</div>' + // end hb-modal-content
  18.         '</div>' + // end hb-modal
  19.       '</div>'+ // end hb-modal-wrap
  20.     '</div>';

Visual Studio Code Settings

You can use VS Code settings to configure prettier. Settings will be read from (listed by priority):

  • Prettier configuration file
  • .editorconfig
  • Visual Studio Code Settings (Ignored if any other configuration is present)

NOTE: If any local configuration file is present (i.e. .prettierrc) the VS Code settings will NOT be used.