vscode的vue3的script标签首行不缩进

### VSCode 中 Vue3 文件 Script 标签首行不自动缩进解决方案 在开发过程中，遇到 Vue3 文件中的 `<script>` 标签首行未正确缩进的问题可能是由于编辑器配置或 ESLint 规则设置不当引起的。以下是具体的解决方法： #### 1. 调整 VSCode 的格式化工具配置 VSCode 默认支持多种 JavaScript 和 TypeScript 的格式化工具（如 Prettier 或 Vetur）。如果当前使用的格式化工具未能正确处理 `.vue` 文件的缩进问题，则可以通过安装插件并调整其配置来解决问题。 推荐使用 **Volar** 插件替代旧版的 Vetur 插件，因为它是专门为 Vue3 设计的。安装完成后，在 `settings.json` 中添加以下内容以确保正确的缩进行为[^4]： ```json { "editor.defaultFormatter": "Vue.volar", "[vue]": { "editor.tabSize": 2, "editor.insertSpaces": true }, "vetur.format.defaultFormatter.html": "js-beautify-html" } ``` 上述配置中设置了默认格式化程序为 Volar，并指定 HTML 使用 js-beautify 进行格式化操作。 #### 2. 修改 ESLint 配置文件 ESLint 是一种静态分析工具，用于识别和报告代码中的模式匹配问题。当项目启用了 ESLint 并对其规则进行了自定义时，可能会干扰正常的代码格式化逻辑。因此需要检查项目的 `.eslintrc.js` 文件是否存在冲突性的规则设定。 通过覆盖特定于 `.vue` 文件的部分规则可以有效缓解此现象。例如，在根目录下的 `.eslintrc.js` 添加如下片段即可禁用不必要的缩进检测: ```javascript module.exports = { root: true, extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'], rules: { indent: ["error", 2], // 统一采用两格缩进 }, overrides:[ { files:['*.vue'], rules:{ indent:'off' } } ] }; ``` 这里明确指定了全局范围内的缩进级别为两个空格单位；而对于所有的 .vue 类型文档单独关闭了缩进验证功能以免影响实际编写体验。 #### 3. 设置 CSS 属性样式标准 虽然题目主要讨论的是关于脚本部分的布局安排情况，但是为了保持整个组件的一致性和美观度，也建议遵循一定的书写习惯。比如对于内联样式的表达形式应当统一加引号以及合理运用各种属性值完成页面设计目标[^1]: ```html <!-- good --> <AppSidebar :style="{ width: sidebarWidth + 'px' }"></AppSidebar> <div style="color:red;text-align:center;">Centered Red Text</div> /* 定义外部CSS类 */ .my-class { color: red; text-align: center; } <!-- 推荐做法 --> <div class="my-class">...</div> ``` 以上示范展示了如何利用带有双引号包裹特性的绑定语法渲染动态宽度参数的同时维持良好的视觉效果；另外还给出了基于分离关注点原则的最佳实践——即优先考虑创建独立的选择器声明而非直接嵌入标记内部。 ---