前端vscode比較好用的保存自動格式化settings.json配置


{
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
  "terminal.integrated.env.windows": {
    "CMDER_ROOT": "D:\\Program Files (x86)\\cmder\\"
  },
  "terminal.integrated.shellArgs.windows": [
    "/k",
    "D:\\\"Program Files (x86)\"\\cmder\\vendor\\init.bat",
    "&",
    "D:"
  ],

  // vscode默認啟用了根據文件類型自動設置tabsize的選項
  "editor.detectIndentation": false,
  // 重新設定tabsize
  "editor.tabSize": 2,
  // #每次保存的時候自動格式化
  "editor.formatOnSave": true,
  // #每次保存的時候將代碼按eslint格式進行修復,vscode es6語法檢測配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //  #讓函數(名)和后面的括號之間加個空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #這個按用戶自身習慣選擇
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  // // #讓vue中的js按編輯器自帶的ts格式進行格式化
  // "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html", // #讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue組件中html代碼格式化樣式
    },
    // 使能每一種語言默認格式化規則
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "vetur.validation.template": true,
    "vetur.format.enable": true,
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // ===========以下4個是控制保存時自動格式化的,並且以4格縮進================
    "editor.tabCompletion": "on",
    // ===========以下是根據自己需求配置的============================
    "editor.suggest.snippetsPreventQuickSuggestions": true, //自動補全的
    "explorer.confirmDelete": true, // 自動補全
    "[json]": {},
    "workbench.sideBar.location": "left",
    "editor.wordWrap": "on", // 控制折行方式。可以選擇: - “off” (禁用折行), - “on” (視區折行), - “wordWrapColumn”(在“editor.wordWrapColumn”處折行)或 - “bounded”(在視區與“editor.wordWrapColumn”兩者的較小者處折行)。
    "editor.fontSize": 17,
    "editor.formatOnSave": true,
    // 兩個選擇器中是否換行
    "editor.formatOnType": true,
    "editor.parameterHints": true,
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    },
    "git.confirmSync": true, // *** 這個是提示空格的點點
    "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
    "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/dist": true
    },
    // "emmet.includeLanguages": {
    //   "vue-html": "html",
    //   "vue": "html",
    //   "javascript": "javascriptreact",
    //   "wxml": "html"
    // },
    "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", //  這個是控制字體樣式的
    "auto-close-tag.activationOnLanguage": [
      "xml",
      "php",
      "blade",
      "ejs",
      "jinja",
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "plaintext",
      "markdown",
      "vue",
      "liquid",
      "erb",
      "lang-cfml",
      "cfml",
      "HTML (Eex)"
    ],
    "eslint.options": {
      "extensions": [".js", ".vue"]
    },
    "editor.mouseWheelZoom": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "files.exclude": {
      "**/.classpath": true,
      "**/.project": true,
      "**/.settings": true,
      "**/.factorypath": true
    },
    "launch": {},
    "workbench.editorAssociations": [],
    "workbench.colorTheme": "Monokai",
    "terminal.integrated.env.osx": {},
    "files.autoSave": "off"
  },
  /*  prettier的配置 */
  // "prettier.printWidth": 100, // 超過最大值換行
  "prettier.tabWidth": 2, // 縮進字節數
  "prettier.useTabs": false, // false縮進不使用tab,使用空格
  "prettier.semi": false, // true句尾添加分號
  "prettier.singleQuote": true, // true使用單引號代替雙引號
  "prettier.proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本樣式進行折行
  "prettier.arrowParens": "avoid", //  (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid:省略括號
  "prettier.bracketSpacing": true, // 在對象,數組括號與文字之間加空格 "{ foo: bar }"
  "prettier.disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化單獨設置
  "prettier.endOfLine": "auto", // 結尾是 \n \r \n\r auto
  "prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中
  "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號
  "prettier.parser": "babylon", // 格式化的解析器,默認是babylon
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗
  "prettier.trailingComma": "es5", // 在對象或數組最后一個元素后面是否加逗號(在ES5中加尾逗號)
  "prettier.tslintIntegration": false, // 不讓prettier使用tslint的代碼格式進行校驗

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM