vs code配置vue自动格式化

我他妈的要被这个vs code的格式化逼疯了。我在网上看了很多的文章,不是太老就是不好使,遇到太多坑了。
在这贴出自己的配置,虽然有多余的代码,虽然可能在未来的更新中用不了,虽然功能不是十分完全,但是希望能帮助到被逼疯的你。
希望大神能给我挑挑毛病,下面开始。

控制变量
目的:在你按了ctrl+s之后,根据规则自动格式化vue和js(ts)代码
vs code版本:最新版
npm版本:最新版
插件
·ESLint
·Prettier
·vuter(这个东西我不确认在自动保存上的有没有作用,希望大神指点)
vue:2x
项目构建方法:脚手架,实测在复制过来的老webpack项目里也可以
package.json关连依赖确认(是不是都起到作用就不知道了,望大神指点):

.eslintrc.js(配置了n遍之后的,估计里面有多余的代码)

module.exports = {
root: true, env: {
node: true,
es6: true,
}, extends: [
'plugin:vue/recommended',
'eslint:recommended',
'plugin:prettier/recommended',
], plugins: ['prettier'], parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
ecmaVersion: 6,//js的版本
},
  rules: {
quotes: [1, 'single'],//这个地方很迷,要为eslint配置类似于prettierrc的格式化代码,才会在vue的template中起作用
'prettier/prettier': 'error',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
}

.prettierrc.js(配置了n遍之后的,估计里面有多余的代码)

module.exports = {
tabWidth: 2,
semi: false,
singleQuote: true,
endOfLine: 'auto',
trailingComma: 'all',
vueIndentScriptAndStyle: true,
}

setting.json

"editor.formatOnSave": true,
"files.autoSave": "off",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}, "[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}, "eslint.format.enable": true,
"eslint.options": {
"extensions": [".js", ".vue"]
},
"eslint.validate": [
"javascriptreact",
"javascript",
"html",
"vue"
],

配置完之后就是作用于js和vue,点击保存自动整形,有不符合规则的的写法会报错,完全错误的报红色,不规范报黄色。
我知道还有很多不足,希望懂的大佬能给我一些指点。

vs code配置vue自动格式化的更多相关文章

  1. 解决VS Code保存时候自动格式化

    VS code 保存会自动格式化.以前都是alt+shift+F格式化的,现在一保存就格式化 解决方式:找到你的VScode扩展,把JS-CS-HTML Formatter这个插件禁用就可以解决

  2. vs code 设置 保存自动格式化vue代码

    配置 ESLint (需安装 Prettier - Code formatter 插件) command + shift + p  打开用户设置 // vscode默认启用了根据文件类型自动设置tab ...

  3. Visual Studio Code 保存时自动格式化的问题

    烦人的说,保存的时候自动格式化, 格式话后,代码就失效了 纳尼!!!! 网上其他人都说     JS-CSS-HTML Formatter这个插件在捣蛋!   试了,的确如此. 找到他,给禁用,就不会 ...

  4. vs code 关闭保存自动格式化 formatonsave - [vscode] - [html]

    有时候Ctrl+s保存,html代码哥格式会紊乱. 造成这个原因一般是我们基本都在用的一个插件: ![](https://img2018.cnblogs.com/blog/1735896/201912 ...

  5. vs code中Vue代码格式化的问题

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vu ...

  6. 配置 ESLint 自动格式化自闭合标签(Self closing tag)

    对于没有子元素或不需要子元素的 HTML 标签,通常写成其自闭合的形式会显得简洁些, - <SomeComponent></SomeComponent> + <SomeC ...

  7. VS Code 配置vue开发环境

    一.插件 网上搜索vscode插件的文章,动辄十几个,其实根本用不了那么多,很多插件的作用还有重叠,电脑性能还被白白浪费.这里精简为主,每一个插件都发挥它最大的作用,并尽量说明它们的作用 Vetur ...

  8. PyCharm配置autopep8,自动格式化Python代码

    1. 关于PEP 8 PEP 8,Style Guide for Python Code,是Python官方推出编码约定,主要是为了保证 Python 编码的风格一致,提高代码的可读性. 官网地址:h ...

  9. vue eslint 代码自动格式化

    vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 V ...

随机推荐

  1. Git - 简单的使用与Github

    Github: Following the instructions to create repo. Git on Linux(centos): download the latest GIT and ...

  2. SQL注入练习第一天

    MySQL 相关知识 在MySQL中,把[INFORMATION_SCHEMA] 看作是一个数据库,确切说是信息数据库.其中保存着关于MySQL服务器所维护的所有其他数据库的信息.如数据库名,数据库的 ...

  3. JDK8新特性详解(一)

    虽然JDK8已经出来了N久,其新特性也在日益改变着我们的编码习惯和风格.虽然有些新特性用起来很顺手,但是总是傻傻分不清到底是哪个版本的.趁今天有时间,我们就来总结一下,JDK8有哪些能提升我们开发效率 ...

  4. ELK原理介绍

    本篇转载自:https://www.cnblogs.com/aresxin/p/8035137.html 为什么使用日志系统: 日志系统记录了系统运行.业务处理的方方面面,在故障排除.业务分析.数据挖 ...

  5. tcp上传学习二--文本文件上传

    //暮雪超霸.加油!!!package tcp文本上传; import java.io.BufferedReader; import java.io.FileReader; import java.i ...

  6. IDEA关联mysql失败Server returns invalid timezone. Go to 'Advanced' tab and set 'serverTimezon'

    时区错误,MySQL默认的时区是UTC时区 要修改mysql的时长 在mysql的命令模式下,输入: set global time_zone='+8:00'; 再次连接成功

  7. Redis缓存篇(一)Redis是如何工作的

    Redis提供了高性能的数据存取功能,所以广泛应用在缓存场景中,既能有效地提升业务应用的响应速度,还可以避免把高并发压力发送到数据库层. 因为Redis用作缓存的普遍性以及它在业务应用中的重要作用,所 ...

  8. wdcp 安装

    lanmp一键安装包是wdlinux官网2010年开始推出的lamp,lnmp,lnamp(apache,nginx,php,mysql,zend,eAccelerator,pureftpd)应用环境 ...

  9. 风炫安全web安全学习第三十一节课 命令执行以及代码执行演示

    风炫安全web安全学习第三十一节课 命令执行以及代码执行演示 参考: http://blog.evalshell.com/2020/12/20/风炫安全web安全学习第三十一节课-命令执行以及代/

  10. Nginx安装,开箱即用?

    一.官网 首页:http://nginx.org/ 下载地址:http://nginx.org/download 安装文档:http://nginx.org/en/docs/install.html ...