vue在vscode代码格式化

文章目录

安装插件
修改配置文件
确保和项目配置不冲突
完成

安装插件

安装三个插件： Prettier - Code formatter、 ESLint 、 Vetur 。对应的插件图片如下

修改配置文件

MacOS使用 Command + Sheft + P，windows 使用 Ctrl + Sheft + P 搜索首选项:打开设置(json),然后把下面配置粘贴进去：

{// 分号"prettier.semi": false,"prettier.eslintIntegration": true,// 单引号包裹字符串// 尽可能控制尾随逗号的打印"prettier.trailingComma": "all","prettier.singleQuote": true,"prettier.tabWidth": 2,// 关闭自带的格式化"javascript.format.enable": false,// 让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// 启用eslint"eslint.enable": true,"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],// 格式化.vue中html"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" // 属性强制折行对齐}},"vetur.format.enable": true,"eslint.options": {"extensions": [".js", ".vue"]},"eslint.autoFixOnSave": true,"editor.tabSize": 2,// 开启行数提示"editor.lineNumbers": "on",// 去掉 vscode 自带的自动保存 ，vscode 默认也是 false"editor.formatOnSave": false,// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,"editor.quickSuggestions": {//开启自动显示建议"other": true,"comments": true,"strings": true},"extensions.ignoreRecommendations": false,"window.zoomLevel": 1,"files.autoGuessEncoding": false,"workbench.sideBar.location": "left"
}

确保和项目配置不冲突

如果项目配置和VSCode默认的配置有冲突可能会出现问题，请确保根目录下的.vscode/settings.json文件和上面的文件并不冲突，可以把.vscode/settings.json设置为一个空JSON。

完成

现在可以试一下 ctrl+s

vue在vscode代码格式化相关推荐

vscode 代码格式化及快捷键
VSCode 代码格式化快捷键 On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shift + I 代码格 ...
vscode代码格式化js自动换行问题
vscode代码格式化js自动换行问题如果设置了默认格式化是使用自带JavaScript和Typescript的语言功能会看的吐血类似下面这种 // 使用自带JavaScript和Typescri ...
VSCode 代码格式化的快捷键
Visual Studio Code可以通过以下快捷键格式化代码: On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu ...
vscode 代码格式化
目录 1 安装插件 2 设置vscode代码格式化 1 安装插件 (目的是记录自己安装的插件) 2 设置vscode代码格式化打开vscode,搜索C_Cpp: Clang_format_fallb ...
三步搞定 vscode 代码格式化
一.安装以下几个 vscode 扩展程序: ESLint Prettier - Code formatter Vetur 如图: 二.打开 settings 文件打开方式: 先按步骤打开 setti ...
VSCode代码格式化快捷键
我们在编写代码和阅读别人代码的时候,容易出现同级元素缩进没有对齐的情况,我们需对代码进行格式化,以方便自己和他人的阅读. 在vscode中使用快捷键 Shift+Alt+F 使用示例: 出现了代码没 ...
VSCode代码格式化
一.如何在VSCode页面内进行代码格式化二.如何在保存代码时自动格式化代码 1.在VSCode中进行代码格式化: 方法一:右键选择"格式化文档" 方法二:shift+alt+F ...
mac下vscode代码格式化及其他常用快捷键
工作中暂时所用到的快捷键: (一) 代码格式化: 快捷键:shift + option + F (二)选中方法,跳进方法快捷键:command + 鼠标左键 (三)选中方法进行查看方法实用位置快捷 ...
VSCode代码格式化快捷键及保存时自动格式化
一.实现vs code中代码格式化快捷键:[Shift]+[Alt]+F 二.实现保存时自动代码格式化: 1)文件 ------.>[首选项]---------->[设置]: 2)搜索em ...