vscode保存文件的时候，自动格式化代码，双引号变单引号，适应模版字符串

最新推荐文章于 2024-04-14 08:03:58 发布

原创最新推荐文章于 2024-04-14 08:03:58 发布 · 8.2k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

本文详细介绍如何在VSCode中配置ESLint，包括设置代码自动格式化、支持Vue文件验证及Prettier集成，确保代码风格一致性和提高开发效率。

安装eslint依赖之后将以下代码复制到settings.json中保存

{
  "window.zoomLevel": 0,
  "editor.renderWhitespace": "none",
  "editor.renderControlCharacters": false,
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": true,
  "editor.fontSize": 18,
  "editor.tabSize": 2,
  "explorer.confirmDelete": false,
  "editor.wordWrap": "on",
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "files.trimTrailingWhitespace": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "liveServer.settings.ignoreFiles": [
    ".vscode/**",
    "**/*.scss",
    "**/*.sass",
    "**/*.ts"
  ],
  "liveServer.settings.mount": [],
  "vetur.validation.template": false,
  "cssrem.rootFontSize": 192,
  "workbench.colorTheme": "Default Light+",
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  // #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // #去掉代码结尾的分号
  "prettier.semi": true,
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  }
}