关于javascript:vue项目Ctrls-vscode代码自动格式化

前言

多人开发 vue 我的项目, 代码格调模式不一

vscode 保留代码，主动依照 eslint 标准格式化代码设置（vscode 最新版配置）

vscode 插件

首先 vscode 须要装一些 vscode 插件

ESLint、Vetur、Prettier-Code formatter、GitLens-Git supercharged

配置 settings.json

关上 settings.json，贴上配置，留神本人原有的 vscode 主题和字体等不要替换掉

打开方式

形式一:

1)文件 ——.>【首选项】———->【设置】

2）搜寻 emmet.include;

3）在 settings.json 下的【工作区设置】中增加

形式二:

Ctrl + P 搜寻 settings.json

贴上如下配置

{
  "window.zoomLevel": 0,
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.colorTheme": "One Monokai",
  "editor.fontSize": 14,
  "workbench.editor.enablePreview": true, // 预览模式敞开
  "editor.formatOnSave": true, // #每次保留的时候主动格式化
  // 主动修复
  "editor.codeActionsOnSave": {"source.fixAll.eslint": true,},
  "eslint.enable": true, // 是否开启 vscode 的 eslint
  // vscode 默认启用了依据文件类型主动设置 tabsize 的选项
  "editor.detectIndentation": false,
  // 从新设定 tabsize
  "editor.tabSize": 2,
  //  #去掉代码结尾的分号 
  "prettier.semi": false,
  //  #应用单引号代替双引号 
  "prettier.singleQuote": true,  
  //  #让 prettier 应用 eslint 的代码格局进行校验 
  "prettier.eslintIntegration": true,
  "javascript.preferences.quoteStyle": "double",
  "typescript.preferences.quoteStyle": "double",
  //  #让函数 (名) 和前面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 配置 ESLint 查看的文件类型
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  "eslint.options": { // 指定 vscode 的 eslint 所解决的文件的后缀
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  }, 
  "git.enableSmartCommit": true,
  "editor.quickSuggestions": {"strings": true},
  // 肯定要在 vutur.defaultFormatterOptions 参数中设置，独自批改 prettier 扩大的设置是无奈解决这个问题的，因为 perttier 默认疏忽了 vue 文件（事实上从疏忽列表移除 vue 也不能解决这个问题）"vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 格式化不加分号
      "singleQuote": true, // 格式化以单引号为主
    },
    "js-beautify-html": {
      // force-aligned | force-expand-multiline vue html 代码格式化
      "wrap_attributes": "force-aligned",//"auto","force-expand-multiline"
      "wrap_line_length": 200,
      "wrap_width_line": false,
      "semi": false,
      "singleQuote": true,
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    },
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "[vue]": {"editor.defaultFormatter": "octref.vetur"},
  "javascript.updateImportsOnFileMove.enabled": "never",
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "workbench.editor.showTabs": true,
  "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressResultsExplorerNotice": false,
        "suppressShowKeyBindingsNotice": true,
        "suppressUpdateNotice": false,
        "suppressWelcomeNotice": true
    },
    "gitlens.keymap": "alternate",
    "git.enableSmartCommit": true,
    "gitlens.historyExplorer.enabled": true,
    "gitlens.views.fileHistory.enabled": true,
    "gitlens.views.lineHistory.enabled": true,
}

vue 我的项目 Ctrl+s vscode 代码主动格式化