vscode从据说到使用，vetur，prettier，htmljscssPrettify踩坑指南。

今天基于vue-cli（2.9.3）构建一个新的项目。我用的sublime，es6的代码格式要与公司格式兼容。采用了vue-cli自带的eslint后，有一些不统一的部分须要修改。先看看sublime里须要怎么处理：

首先，在项目根目录下找到.eslintrc.js，在rules节点下新增两个配置项

'semi': [2, 'always'],
    // 默认空格4个
    'indent': ['error', 4, {'SwitchCase': 1}]
  }// 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 dev

eslint会按照新的规则去检查代码。问题是，我这个项目里，已经有一些代码写好了，格式是缩进两个空格的。

那么若是手动改，不只效率低，并且还容易出错。我就想找个插件看一下，是否是有自动格式化的工具。在项目

根目录下，我找到了editorconfig文件，看到其中的indent_size后，我就修改了其中配置indent_size为4

indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = trueroot = 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,

配置中修改

4,

        // ...

        // Should the space before an anonymous function's parens be added, "function()" vs "function ()"
        "space_after_anon_function": true,        // 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, 修改

"vue"],"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "vue"],

这样就能够给.vue格式的文件作格式化了。

可是觉得这样就ok了？并非，发现有个问题，格式化的时候，es6的方法简写会被误认为方法调用：

{
    // 期待的格式化效果
    mounted () {},
    // 实际的格式化效果
    mounted() {}
}

而后看了好多文档，在这个jsPrettify里也没有这个配置能够进行修改。而后就吃午餐去了，中午吃饭听同事说vscode能够解决这个问题。我下午回来就下载了一个，一试，果真不错。

vscode会自动检测个人文件类型，给我推荐插件下载，不须要我再去从网上搜插件，这个功能很人性化。我一打开.vue文件,就推荐了，vetur插件给我用了。我换了一下经常使用的快捷键，使用起来很方便。可是核心问题是，，，这个格式化，也没有解决刚才的问题，也是少了那个空格。

而后从网上找了找答案，能够这样配置：

在vscode中，打开首选项，设置，搜索vetur.format,再右侧用户设置里，覆写：

true,
"vetur.format.defaultFormatter.js": "vscode-typescript", //默认是prettier"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript", //默认是prettier

好了到此，es6方法的语法问题解决了。

而后还有一个问题，就是vue文件中的css部分，语法默认不支持sass，postcss，须要本身配置。我这里用了postcss：

在项目根目录下，找到.postcsssrc.js新增一行以下：

'postcss-cssnext': {}
    }
}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上手方便，使用便捷，用户体验好，量级轻，速度也不错。再初始化的时候能够选择你的开发环境，自动给你安装好大部分经常使用插件。我估计我之后就放不下它了。也一样推荐给爱学习的你。

本文完。