Visual Studio Code 设置vue保存自动格式化代码

最新推荐文章于 2025-04-28 14:42:17 发布

阿弥陀佛@么么哒

最新推荐文章于 2025-04-28 14:42:17 发布

阅读量791

点赞数 1

CC 4.0 BY-SA版权

分类专栏： visual studio code 文章标签：前端

本文链接：https://blog.youkuaiyun.com/csdnZHANGjf810/article/details/109388811

visual studio code 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在VSCode中配置自动保存并结合ESLint进行代码格式化，包括安装ESLint插件，修改设置JSON以禁用自动配置，设置tab大小，启用保存时自动格式化和修复，添加Vue支持，以及整合Prettier和Vetur等。通过这些步骤，开发者可以确保代码在保存时自动遵循预设的格式规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，下载 eslint sudo npm install -g eslint
2, 修改配置文件: 文件>首选项>设置> setting.json
在这里插入图片描述

{
"minapp-vscode.disableAutoConfig": true,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"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代码格式化样式
  }
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行

}