下面主要详细介绍在mac版本的vscode下如何配置prettier工具：
-
在学习vue阶段使用eslint用来约束代码风格，前端的缩进一般设置为两个空格，而不是四个。设置如下：
在setting设置下搜索：
image.png -
安装eslint：
首先在命令行创建vue项目的时候选择如下：
image.png
这样项目多了一个eslint文件：
image.png vscode插件：
-
安装插件
image.png
image.png -
vscode的setting.json配置如下：
将一下代码写入到文件头部：
image.png
-
安装prettier插件：
image.png
在setting.json配置如下：
//这里写你prettierrc的位置
"prettier.configPath": "/Users/xxx/.prettierrc",
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
// 设置 .vue 文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": false
},
"prettier": {
"printWidth": 300,
"trailingComma": "none",
"semi": false,
"singleQuote": true,
"arrowParens": "avoid"
}
},
使用文本编辑器在指定位置新增.prettierc文件：
一般放在user根目录下，内容如下：
{
"semi": false,
"singleQuote": true,
"printWidth": 300
}
tips：注意这个文件默认是隐藏状态，按shift+option+. 就可以显示了。
以上就是配置prettier的全部步骤，如有不足，烦请指正，共同进步~
