vsCode 代码自动格式化配置

最新推荐文章于 2024-08-15 11:01:12 发布

泊一

最新推荐文章于 2024-08-15 11:01:12 发布

阅读量464

点赞数

分类专栏： vsCode 文章标签： vscode

本文链接：https://blog.csdn.net/w_D_lufei/article/details/120117513

版权

vsCode 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何配置Visual Studio Code以提升开发体验，包括安装Eslint、Prettier和Vetur等插件，设置自动保存、代码格式化、Vue文件模板格式化等，以及启用文件路径导航和eslint自动修复功能。通过这些设置，可以实现代码风格统一，提高开发效率。

摘要由CSDN通过智能技术生成

下载插件
Eslint
Prettier - Code formatter
Vetur
setting.json

{
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Default Dark+",
    "editor.minimap.enabled": false,
    "files.autoSave": "afterDelay",
    "window.zoomLevel": 1,
    "editor.fontLigatures": false,
    // 100 列后换行
    "editor.wordWrapColumn": 100,
    // 开启 vscode 文件路径导航  
    "breadcrumbs.enabled": true,
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化 
    "editor.formatOnSave": true,
     // prettier 设置语句末尾不加分号  
  "prettier.semi": false,
  // prettier 设置强制单引号  
  "prettier.singleQuote": true,
  // 选择 vue 文件中 template 的格式化工具  
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 显示 markdown 中英文切换时产生的特殊字符  
  "editor.renderControlCharacters": true,
  // 设置 eslint 保存时自动修复  
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // eslint 检测文件类型  
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  // vetur 的自定义设置  
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}