在vscode中使用eslint+prettier格式化vue项目代码 (转载)
2024-09-30 10:36:27
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~
vetur:可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,
但是!格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等,
Prettier - Code formatter:只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
在vscode的文件-首选项-设置里,右侧配置里添加如下代码即可(代码有注释!),从此直接 Ctrl+S 就能一键格式化了
代码如下:
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 4,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"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"
// #vue组件中html代码格式化样式
}
},
}
原作者:Guoyubo
最新文章
- img图片下面出现莫名的下边距解决办法
- 各种url编码
- c语言中time相关函数
- [51NOD]大数加法(模拟)
- Swift 2.0学习
- (转)Flickr架构
- python面对对象编程----------7:callable(类调用)与context(上下文)
- arrayAccess的接口使用
- Python网络数据采集3-数据存到CSV以及MySql
- 关于Web.config的debug和release.config文件
- echarts饼图点击事件
- Linux根据UUID自动挂载磁盘分区
- MySQL常用的查询命令
- JS学习过程中碰到的小问题
- JS对象的拷贝
- Java问题解决:springboot启动出现-Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package
- 7B - 今年暑假不AC
- Python基础理论 - 函数
- python3+selenium框架设计10-发送邮件
- fillder---安装证书(抓取https)