当前位置: 首页 > 编程笔记 >

详解VS Code使用之Vue工程配置format代码格式化

百里雅珺
2023-03-14
本文向大家介绍详解VS Code使用之Vue工程配置format代码格式化,包括了详解VS Code使用之Vue工程配置format代码格式化的使用技巧和注意事项,需要的朋友参考一下

编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等。

添加对.vue文件的格式化支持

这里我们添加对 .vue 文件的格式化支持。
1. 安装 Vetur 插件
2. 在 VS Code 的设置中添加如下规则:

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

这里是设置 Vetur 默认使用的格式化插件 prettier。 这样对于.vue文件中的 html 和 javascript 代码都有格式化支持了。

使用符合 ESLint 规范的格式化

1、使用 prettier 格式化 .js 文件

可以设置 prettier 在格式化的时候,读取项目的 .eslintrc的配置,对 js代码进行格式化。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

  1. 首先为 VS Code 安装 prettier 插件
  2. 在 VS Code 的设置中添加如下配置
    1. json
    2. "prettier.eslintIntegration": true

2、对.vue文件的格式化

prettier插件对 .vue 文件格式化时,暂不能支持将 eslint规范应用到 js代码中。

但是我们可以先将其格式化,然后利用 ESLint 保存文件时自动修复错误的特性,修复一些诸如 分号,空格,缩进 等错误。

参考资料:

- Vetur

本文首发于我的github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍vscode配置vue下的es6规范自动格式化详解,包括了vscode配置vue下的es6规范自动格式化详解的使用技巧和注意事项,需要的朋友参考一下 前言 最近在写Vue的时候,遇见了js es6格式化问题,因为我平时用vscode在写php,所以会安装一些格式化插件,也包括html-css-js的插件 导致的问题:由于vue语法规范问题,导致保存自动格式化成不被使用的代码格式,出现

  • 本文向大家介绍详解VSCode配置启动Vue项目,包括了详解VSCode配置启动Vue项目的使用技巧和注意事项,需要的朋友参考一下 下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好

  • 本文向大家介绍vue+eslint+vscode配置教程,包括了vue+eslint+vscode配置教程的使用技巧和注意事项,需要的朋友参考一下 package.json文件所需要的eslint包 执行npm install安装好这些依赖包 在项目中添加两个文件 自行配置eslint检查时所忽略的文件 完成后在目录中的结果 vscode+eslint配置 我这里是使用vscode进行检查因此还需

  • 本文向大家介绍Python中格式化format()方法详解,包括了Python中格式化format()方法详解的使用技巧和注意事项,需要的朋友参考一下  Python中格式化format()方法详解 Python中格式化输出字符串使用format()函数, 字符串即类, 可以使用方法; Python是完全面向对象的语言, 任何东西都是对象; 字符串的参数使用{NUM}进行表示,0, 表示第一个参数

  • 本文向大家介绍vue-cli3.0使用及部分配置详解,包括了vue-cli3.0使用及部分配置详解的使用技巧和注意事项,需要的朋友参考一下 好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: 2.创建项目(这个就跟react创建脚手架项

  • 在Visual Studio的Windows中,用于格式化或“美化”Visual Studio代码编辑器中的代码的Ctrl+K+F和Ctrl+D的等价物是什么?