mac版本最全的vscode配置prettier工具

下面主要详细介绍在mac版本的vscode下如何配置prettier工具：

• 在学习vue阶段使用eslint用来约束代码风格，前端的缩进一般设置为两个空格，而不是四个。设置如下：
  在setting设置下搜索：

  
  
  image.png

• 安装eslint：
  首先在命令行创建vue项目的时候选择如下：

  
  
  image.png
  
  

  这样项目多了一个eslint文件：

  
  
  image.png

• vscode插件：

1. 安装插件

   
   
   image.png
   
   
   image.png

2. vscode的setting.json配置如下：
   将一下代码写入到文件头部：

   
   
   image.png

3. 安装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的全部步骤，如有不足，烦请指正，共同进步~