vscode从听说到使用,vetur,prettier,htmljscssPrettify踩坑指南。

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

首先,在项目根目录下找到.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}]
  }'semi': [2, 'always'],
    // 默认空格4个
    'indent': ['error', 4, {'SwitchCase': 1}]
  }

现在运行

npm run dev

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

那么如果手动改,不仅效率低,而且还容易出错。我就想找个插件看一下,是不是有自动格式化的工具。在项目

根目录下,我找到了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 = trueindent_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,

vscode从听说到使用,vetur,prettier,htmljscssPrettify踩坑指南。_第1张图片

配置中修改

        // Indentation size
        "indent_size": 4,

        // ...

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

这样就可以给.vue格式的文件做格式化了。

但是以为这样就ok了?并不是,发现有个问题,格式化的时候,es6的方法简写会被误认为方法调用:

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

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

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

然后从网上找了找答案,可以这样配置:

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

"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript", //默认是prettiertrue,
"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': {}
    }
}'postcss-cssnext': {}
    }
}

如果想用sass可以再webpack的配置文件里进行修改。

然后又一个问题,vscode里,css代码没有高亮,看了一下,需要在.vue文件的style标签里,加入属性: