vue在vscode代码格式化

简介: vue在vscode代码格式化

安装插件

安装三个插件: Prettier - Code formatterESLintVetur 。对应的插件图片如下

修改配置文件

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

目录
相关文章
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
322 10
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
1212 1
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
1713 3
|
JavaScript C++ 应用服务中间件
vs code 搭建 vue 开发环境
vs code 搭建 vue 开发环境
214 4
|
JavaScript
VScode格式化vue文件--避免html属性换行
VScode格式化vue文件--避免html属性换行
1550 0
|
数据采集 Web App开发 JavaScript
vscode跟踪vue代码方法
vscode跟踪vue代码方法
486 0
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
953 0
|
JavaScript 前端开发
第三篇: VSCode关于VUE的插件配置
好吧,万物都逃不过真香定理,几周后又把VUE捡起来了,主要是最近的这个小项目前端也是想用到这个VUE。 首先的话,关于vscode的话可以理解为宇宙第一IDE visual studio的小老弟,主要是轻量级,支持广,插件多。
5751 0
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
362 0
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
811 0