vscode中prettier设置的注意点

最近在学习前端框架vue的使用，涉及到代码规范化，就涉及到对eslint和prettier的设置。简单介绍一下，eslint是代码规范检查工具，prettier是依据一定规范帮我们对代码自动格式化的工具。

我经过一番设置后，发现对于一些文件，我无法利用prettier自动格式化，修改文件后一按save键保存，反而格式化为另一种方式（原来没有双引号的都变成了双引号，可我的prettier设置可都是单引号啊，而eslint已经设置单引号检查，所以一保存就大片报错，让我很无语了）。我检查了很久，也没有找到原因。

后来发现prettier格式化代码的作用域是按照不同的文件类型来分的，.vue、.js、.html的等等。我那个老是出错的就是.js文件。马上上网查阅以前大神的资料，果然是的。说是对于.js文件的格式化，vscode会先从系统根目录上找有关配置文件，没有的话，无法执行。

所以对于.js文件，先要在本机用户根目录上创建一个.prettierrc文件，放上有关设置。

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 300,
  "trailingComma": "none"
}

然后在vscode的设置中添加配置文件路径信息，"prettier.configPath":"/Users/huzhaoxuan/.prettierrc"，

详细设置如下： 

"eslint.alwaysShowStatus": true,
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  "prettier.configPath": "/Users/xxxxxx/.prettierrc",
  "prettier.singleQuote": true,
  //每行文字超过此限制会被迫换行
  "prettier.printWidth": 300,
  "prettier.arrowParens": "avoid",
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "trailingComma": "none",
      "semi": false,
      "singleQuote": true,
      "arrowParens": "avoid",
      "printWidth": 300
    },
    "js-beautify-html": {
      "wrap_attributes": false
    }
  },

保存后测试，一切OK！可以放心大胆的在eslint的道路上前进了！