今天基于vue-cli（2.9.3）构建一个新的项目。es6的代码格式要与公司格式兼容。采用了vue-cli自带的eslint后，有一些不统一的部分需要修改。
首先，在项目根目录下找到.eslintrc.js，在rules节点下新增两个配置项
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 以下是新增
// segment mark,默认格式需要再行尾必须加分号
'semi': [2, 'always'],
// 默认空格4个
'indent': ['error', 4, {'SwitchCase': 1}]
}现在运行
npm run deveslint会按照新的规则去检查代码。问题是，我这个项目里，已经有一些代码写好了，格式是缩进两个空格的。
那么如果手动改，不仅效率低，而且还容易出错。我就想找个插件看一下，是不是有自动格式化的工具。在项目
根目录下，我找到了editorconfig文件，看到其中的indent_size后，我就修改了其中配置indent_size为4
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true那么这个配置文件是干嘛用的呢？我就上网查了，看到说是可以配合各个ide做代码格式化的。我当时在用sublime，就下载了sublime的EditorConfig插件。发现sublime的确是按照新的格式在写代码了，但是旧的代码还是没有给格式化的能力。那么我就不死心了。我就上网查查看sublime的js格式化插件。找了两个：jsFormate，html/css/js Prettify,这两个我都看了，他们对js的格式化，都是基于这个叫js Prettify的插件。所以推荐是用后者，它们也可以通过简单的配置，达到基础的格式化功能。具体做法如下：
下载好插件以后，打开配置文件Prettify Preferences Default,
配置中修改
// Indentation size
"indent_size": 4,
// ...
// Should the space before an anonymous function's parens be added, "function()" vs "function ()"
"space_after_anon_function": true,再打开配置文件Plugin Options - Default, 修改
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "vue"],这样就可以给.vue格式的文件做格式化了。
但是以为这样就ok了？并不是，发现有个问题，格式化的时候，es6的方法简写会被误认为方法调用：
{
// 期待的格式化效果
mounted () {},
// 实际的格式化效果
mounted() {}
}然后看了好多文档，在这个jsPrettify里也没有这个配置可以进行修改。然后就吃午饭去了，中午吃饭听同事说vscode可以解决这个问题。我下午回来就下载了一个，一试，果然不错。
vscode会自动检测我的文件类型，给我推荐插件下载，不需要我再去从网上搜插件，这个功能很人性化。我一打开.vue文件,就推荐了，vetur插件给我用了。我换了一下常用的快捷键，使用起来很方便。但是核心问题是，，，这个格式化，也没有解决刚才的问题，也是少了那个空格。
然后从网上找了找答案，可以这样配置：
在vscode中，打开首选项，设置，搜索vetur.format,再右侧用户设置里，覆写：
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript", //默认是prettier好了到此，es6方法的语法问题解决了。
然后还有一个问题，就是vue文件中的css部分，语法默认不支持sass，postcss，需要自己配置。我这里用了postcss：
在项目根目录下，找到.postcsssrc.js新增一行如下：
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
'postcss-cssnext': {}
}
}如果想用sass可以再webpack的配置文件里进行修改。
然后又一个问题，vscode里，css代码没有高亮，看了一下，需要在.vue文件的style标签里，加入属性：
<style lang="postcss">然后高亮以后，发现vscode的css格式化，缩进还是两个空格。
这里得说一下，这个缩进是vetur插件做的格式化，它格式化的方式使用的是另外一个插件，叫prettier，如果想要配置prettier，可以在项目根目录下创建一个配置文件：.prettierrc.js
内容如下：
module.exports = {
tabWidth: 4
};这里说下，prettier的配置功能很少，所以，之前修改es6语法，在prettier里没有配置，就直接换成了typescript去格式化。
这样，整体用下来，vscode上手方便，使用便捷，用户体验好，量级轻，速度也不错。再初始化的时候可以选择你的开发环境，自动给你安装好大部分常用插件。我估计我以后就放不下它了。也同样推荐给爱学习的你。
本文完。