vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js、html和css代码进行格式化。
vscode Vetur插件
Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上。
vscode ESlint插件
Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作。
基于vue-cli创建的项目 以下相关步骤需要注意:
创建的时候把Linter/Formatter选上(默认已选上)
下一步选择Eslint+Prettier
下一步选择Lint on save (在编辑保存之后根据对代码格式进行检测)
下一步选择In dedicated config files(将eslint和prettier的配置抽离到独立的文件中)
创建完在package.json里面可看到和eslint与prettier相关的依赖
在.eslintrc.js可以看到总体的eslint规则合并了vue、eslint和prettier的一些插件库进行语法分析(eslint针对js,vue、prettier针对js、html和css,这里eslint和prettier的一些冲突已经处理)
到这一步,编译的时候就能看到eslint报错和警告了,但是还不能实现保存自动格式化功能。
在文件根目录下创建.prettierrc对prettier格式化进行自定义规则设置,以下为我添加的规则
{
/* 单引号包含字符串 */
"singleQuote": true,
/* 不添加末尾分号 */
"semi": false,
/* 在对象属性添加空格 */
"bracketSpacing": true,
/* 优化html闭合标签不换行的问题 */
"htmlWhitespaceSensitivity": "ignore"
}
在用户设置添加自定义设置
mac中的位置
根据需要选择全局(User)或者工程(Workspace)的配置,点击右上角的编辑按钮,打开settings.json文件
添加以下配置,使编辑器在保存时自动eslint规则格式化
"editor.codeActionsOnSave": {
"source.fixAll": true
},
/* 关闭编辑器自带保存格式化功能,此功能会用Vetur进行格式化。*/
"editor.formatOnSave": false
这是我自己的自定义配置
非vue-cli创建的项目
单独引入以下红框中的几个依赖
添加vscode Vetur和ESlint, .eslintrc.js、.prettierrc 和 settings.json的内容和上面一样,这样就可以实现保存自动根据eslint进行格式化了。
总结
引入eslint、vue和prettier的一些相关的依赖
@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-prettier
eslint-plugin-vue
prettier
安装vscode Vetur和ESlint插件
配置.eslintrc.js文件
配置.prettierrc文件
配置.settings.json文件
到此这篇关于vscode 配置vue+vetur+eslint+prettier自动格式化功能的文章就介绍到这了,更多相关vscode vue vetur eslint prettier内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!
原文链接:https://juejin.im/post/5e762fb9f265da573e6749bb
vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能相关推荐
- cdh的hive配置中,修改 添加 hive-site.xml 配置 hive 增加用户 role 更改权限
dh的hive配置中,修改 添加 hive-site.xml 配置 CDH版本的hive-site.xml是通过CM配置生成的文件,每次启动,都会根据CM选项还原配置,因此,我们必须用CM界面,找到H ...
- vscode中写markdown格式笔记的配置过程和相关语法
vscode中写markdown格式笔记的配置过程和相关语法 一.引言 二.安装相关插件 三.开始使用vscode进行编写 四.相关语法 参考链接: link link 一.引言 以前使用 Typor ...
- vscode中如何修改vetur配置_vsCode vetur自用配置
:grin: { "editor.tabSize": 2, "editor.formatOnSave": true, "eslint.validate ...
- VScode配置eslint保存自动格式化,eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号;““
本文是开启eslint检验和配置eslint格式化:如果想要关闭eslint,查看这篇关闭eslint方法: 1.必须安装的三个插件eslint, prettier-Code formatter ,v ...
- WebStorm配置eslint检查自动格式化(自动解决eslint问题\Vue3项目解决ESLint问题)
参考 注意:需要修改一个地方才能ctrl + s保存,并且根据eslint的规则自动格式化(我一般都是按个空格,然后ctrl + s保存). 还可以设置:(未测试)
- eclipse中设置java、xml文件的字体大小以及代码自动提示功能
设置字体大小: 在菜单windows-->prefereces里面,找到General-->Appearance-->Colors and Fonts, 设置xml文件字体大小:找B ...
- vscode代码库登录配置_VSCode 配置 Sonar Lint支持代码检查提效
安装SonarQube插件 在VScode的扩展里面,安装SonarQube support for Visual Studio Code extension, 在安装了 SonarQube 之后,使 ...
- C语言编译php环境,vscode中C语言编译环境的配置方法(分享)
本篇文章给大家介绍一下vscode配置C语言编译环境的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vscode c语言的环境配置 完整教程请查看该教程:https://bl ...
- 2 snippets vue 修改配置_VSCode 自定义Vue snippets, 快速生成Vue模板
命令行 Ctrl+Shift+P # 选择 Configure User Snippets # 选择 Vue.json 原始的Vue.json { // Place your snippets for ...
最新文章
- js中定义变量之②var let const的区别
- linux 软件 web管理系统,如何快速安装Webmin(linux系统web管理配置工具)
- ZOJ 3702 Gibonacci number(数学推导题)
- 云服务器 ECS Linux 系统下使用 dig 命令查询域名解析
- Java开发中JDBC连接数据库代码和步骤
- 忧云:喻红艺术展观后
- 在centOS7中装mysql_在 CentOS7 上安装 MySQL5.7
- kail利用msf工具对MS12-020漏洞进行渗透测试
- 获取Class对象方式
- 清华毕业生应聘“保姆”,年薪40万:她凭什么拿高薪?
- 电脑投屏软件哪个好_无线投屏器和软件投屏的区别是什么,哪个更好用?
- python棋子判定_python微信跳一跳系列之棋子定位颜色识别
- java子网划分_IP地址子网划分_动力节点Java学院整理
- JAVA 蔡羽 基础知识漫谈
- mysql字符类型_MySQL学习分享--字符类型
- Axure RP 8汉化
- jieba分词词性对照表
- 以《简单易懂》的语言带你搞懂无监督学习算法【附Python代码详解】机器学习系列之K-Means篇
- 机器学习期末考试满分试卷答案
- chrome显示比例 Android,Android版Chrome在大尺寸平板电脑中将默认采用桌面模式
热门文章
- Ubuntu 20.04 64位 Google Protocol ProtoV3 bufbuild buf 工具安装使用指南
- 哈希的应用 -- 布隆过滤器
- 终于读了lt;lt;了不起的盖茨比gt;gt;
- Win7电脑系统崩溃怎么解决?
- 使用python selenium解决谷歌验证码(reCAPTCHA)
- SkinMagic的一点使用经验,特此共享!
- android和和jni的关系,Android.mk与jni目录的关系
- 新手小白的vscode的配置------清楚明了显而易见,弄不好你过来打我
- 高校教师称大学生宿舍关系整体更趋冷漠
- SpringCloud将Eureka注册中心更改为CSE注册中心