vscode

格式化代码：

1、点击

搜索Vetur并安装，我这里已经安装了。

， 

 2、点击设置-->settings

  

 再点击

在打开的页面输入已下内容并保存

{
  "workbench.iconTheme": "vscode-icons",
  // 选择vue文件的格式化工具
  "[vue]": {
    // 1.使用prettier,无法配置函数名后的空格
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    // 2.使用prettier-eslint
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
  "source.fixAll": true,
    "source.fixAll.eslint": false
  },
  "eslint.enable": true, //是否开启vscode的eslint
  // 配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "vue", "html"],
  "eslint.options": {
    //指定vscode的eslint所处理的文件的后缀
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用单引号替代双引号
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.bracketSpacing": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "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
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    }
  },
  // 关于@src目录路径提示的配置
  // 安装vscode插件 `Path Intellisense`
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "files.autoSave": "onFocusChange",
  "vsicons.dontShowNewVersionMessage": true,
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "explorer.compactFolders": false
}

一、格式化：

1、设置代码格式化：

{
    "vetur.format.defaultFormatter.html": "prettier",
   "vetur.format.defaultFormatter.js": "vscode-typ=script",
   "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          "wrap_attributes": "auto"
      },
      "prettyhtml": {
          "printWidth": 100,
          "singleQuote": false,
          "wrapAttributes": false,
          "sortAttributes": false
      }
},
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontLigatures": null,
"editor.formatOnSave": true

}

2、设置自动换行：

File->Preferences->Settings->然后直接搜索 editor.wordWrap ->选择On即可；如下图所示：

3、在打开的页面填入已下代码并保存：

{
  "workbench.iconTheme": "vscode-icons",
  // 选择vue文件的格式化工具
  "[vue]": {
    // 1.使用prettier,无法配置函数名后的空格
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    // 2.使用prettier-eslint
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
  "source.fixAll": true,
    "source.fixAll.eslint": false
  },
  "eslint.enable": true, //是否开启vscode的eslint
  // 配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "vue", "html"],
  "eslint.options": {
    //指定vscode的eslint所处理的文件的后缀
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用单引号替代双引号
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.bracketSpacing": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "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
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    }
  },
  // 关于@src目录路径提示的配置
  // 安装vscode插件 `Path Intellisense`
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "files.autoSave": "onFocusChange",
  "vsicons.dontShowNewVersionMessage": true,
  "[javascript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "explorer.compactFolders": false
}