vscode使⽤Prettier插件格式化配置使⽤代码详解
参考
使⽤ESLint+Prettier来统⼀前端代码风格
vscode 配置vue+vetur+eslint+prettier⾃动格式化功能
问题描述
1. 最近⽤Nodejs + express 写了⼀个zip⽂件上传的功能，代码给了别⼈看，各种吐槽，代码不规范，没有按照eslint，编辑器打开就是各
种红⾊提醒，当然还有其他许多…
2. 第⼀反应就是反感，后⾯冷静⼀想，还是⾃⼰做事的态度有问题，做完了功能已经完成了95%，为什么不到最后⼀步⼀键格式化，做
到百分百呢？反思中
为了让以后代码美观，不让别⼈吐槽，⾃⼰整理了vscode + prettier
1.使⽤vscode 安装 prettier 插件
2.创建⼀个.prettierrc.js⽂件
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true, // 使⽤单引号
"printWidth": 200, // 超过最⼤值换⾏
"htmlWhitespaceSensitivity": "ignore",
"semi": false, // 结尾不⽤分号
"disableLanguages": ["vue"] // 不格式化vue⽂件，vue⽂件的格式化单独设置
};
在⽹上查了在vscode中配置 prettier的，感觉不⽣效，就不做过多演⽰了
why prettier?
我说⼀下个⼈的理解
格式化的范围更⼴，HTML、CSS、JavaScript、ES6(Class的写法)、JSX、typescript；prettier 应⽤更⼴泛点
eslint 的eslint fix all auto-fixable problems也⽐较⽅便⾃动修改符合eslint规范的代码，差异不⼤
vetur 适合vue⽂件，使⽤⽐较局限
⼯具符合⾃⼰的习惯，顺⼿就好
Prettier 的配置⽂件类型
1. 根⽬录创建.prettierrc ⽂件，能够写⼊YML、JSON的配置格式，并且⽀持.yaml/.yml/.json/.js后缀；
2. 根⽬录创建.prettierrc.js⽂件，并对外export⼀个对象
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true, // 使⽤单引号
"printWidth": 200, // 超过最⼤值换⾏
"htmlWhitespaceSensitivity": "ignore",
"semi": false, // 结尾不⽤分号
"disableLanguages": ["vue"] // 不格式化vue⽂件，vue⽂件的格式化单独设置
"trailingComma": "none" // 函数最后不需要逗号
};
推荐使⽤js⽂件作为配置⽂件，这样可以在配置⽂件中写注释，⽅便理解
3.在.prettierrc.json中新建prettier属性。
{
"extends": [
"airbnb",
"prettier",
"prettier/react"
]
,
"singleQuote": true,
"semi": false
}
不能在json⽂件中写注释
Prettier 的配置⽂件属性说明
{
// 使能每⼀种语⾔默认格式化规则
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
/* prettier的配置 */
"prettier.printWidth": 100, // 超过最⼤值换⾏
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": false, // 缩进不使⽤tab，使⽤空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使⽤单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使⽤了⼀些折⾏敏感型的渲染器（如GitHub comment）⽽按照markdown⽂本样式进⾏折⾏
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有⼀个时是否要有⼩括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与⽂字之间加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue⽂件，vue⽂件的格式化单独设置
"dOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使⽤eslint的代码格式进⾏校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使⽤prettier格式化的⽂件填写在项⽬的.prettierignore⽂件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 单独放⼀⾏
"prettier.jsxSingleQuote": false, // 在jsx中使⽤单引号代替双引号
"prettier.parser": "babylon", // 格式化的解析器，默认是babylon
"quireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使⽤stylelint的代码格式进⾏校验
"ailingComma": "es5", // 在对象或数组最后⼀个元素后⾯是否加逗号（在ES5中加尾逗号）
"prettier.tslintIntegration": false // 不让prettier使⽤tslint的代码格式进⾏校验
}
问题整理
Vue ⽂件格式化之后报space-before-function-paren错误？
在⽹上想prettier直接修改解决的办法，发现没有，只能另辟蹊径，下⾯是我整理的
1.安装eslint插件
2.先⽤ prettier 插件格式化
html文件格式化3.⿏标放到script代码中，右键 -> 源代码操作 -> eslint fix all auto-fixable problems格式化
Vue⽂件中的HTML>结尾符号换⾏？
1.将配置⽂件.prettierrc.js的printWidth属性设置最⼤长度，尽量让html在同⼀⾏，如果html过长，换⾏的也是存在的，可以针对极少的⼿动去修改
"printWidth": 200, // 超过最⼤值换⾏
};
格式化函数的最后⼀个参数后⾯有逗号？
尾随逗号 Trailing Commas
多⾏时尽可能打印尾随逗号。（例如，单⾏数组永远不会得到尾随逗号。）
"trailingComma": "none" // 函数最后不需要逗号
};
有效选项：
“none” - 没有尾随逗号。
“es5” - 在ES5中有效的尾随逗号（对象，数组等）
“all” - 尽可能使⽤尾随逗号（包括函数参数）。这需要 nodejs 8。
JSX>结尾符号换⾏？— JSX Brackets
将 > 多⾏ JSX 元素放在最后⼀⾏的末尾，⽽不是单独放在下⼀⾏（不适⽤于⾃闭元素）。
默认CLIAPI/.fig.js/package.json[“prettier”]
false--jsx-bracket-same-linejsxBracketSameLine:
"jsxBracketSameLine": true, // 在jsx中把'>' 不单独放⼀⾏
};
有效选项：
true - ⽰例：
false - ⽰例：
总结
到此这篇关于vscode 使⽤Prettier插件格式化配置使⽤的⽂章就介绍到这了，更多相关vscode 使⽤Pretti
er插件格式化配置内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。