团队协作统一vue代码风格，vscode做vue项目时的一些配置
1. 安装Vetur 扩展
主要是用于让vscode能识别vue文件，对vue代码进行高丽处理，并且它内置了一些代码格式化的设置
2. 安装ESLint
如果你的项目已经开启了eslint规范, 再有多余的空格,或者空行，会有红色波浪线提示。
但是光有提示还不够，还希望在ctrl + s保存的时候自动帮我们处理这些小问题。其实那些js规范，大部分人错得多的地方无非就是个空格与空行的问题
文件 -> 首选项 -> 设置
将以下配置填入 worksapce settings
{
"editor.tabSize": 2,
"editor.detectIndentation": false,
"editor.mouseWheelZoom": true,
"editor.wordWrap": "on",
"editor.tabCompletion": "onlySnippets",
"files.associations": {
"*.vue": "vue"
},
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"eslint.validate": [
{
"language": "javascript",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "vue-html",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
}
我不是一个喜欢装很多插件但是几乎用不上的人，我觉得就这样保证团队内的vue项目代码风格已经足以。
前面的一些配置，一直到
"vetur.format.defaultFormatter.js": "vscode-typescript",
是修改的vscode的一些默认配置，主要是缩进换行什么的。如果你想自己了解下这些具体是干嘛的，你可以装一个chinese插件可能会方便你看那些配置注释。从这里一直到
"eslint.validate":
是修改的编辑器右键格式化的一些配置，这只需要配合的vetur插件完成。你可能不适应
"vetur.format.defaultFormatter.html": "js-beautify-html",
这种一行一句属性的风格，不过vue官网风格指南推荐的是这样，你也可以试着自己改一下。
关于eslint的部分基本上就是让你保存的时候自动按照你设置的eslint规范去再去调整一下你的代码格式。主要是一些不该加分号的地方你可能习惯性的加了分号，而配置了这些之后，在你保存的时候就会把那些分号，或者每行代码的末尾的空格，每个文件最下面的空行都干掉。
3.利用vscode配置符合官网风格指南的vue代码片段
- 输入 ctrl + shift + p 打开命令输入 snippet (打开用户代码片段)
- 再输入vue(选择代码片段的语言)如果搜索不到，安装一个插件 vueHelper
- 如果搜索到了之后复制粘贴以下代码
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"import OtherComponent from '@/components/OtherComponent'\n",
"export default {",
" name: 'MyName',",
" components: {",
" OtherComponent",
" },",
" directives: {},",
" filters: {},",
" extends: {},",
" mixins: {},",
" props: {},",
" data () {",
" return {\n",
" }",
" },",
" computed: {},",
" watch: {},",
" beforeCreate () {",
" // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等",
" },",
" created () {",
" // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，$el 属性还不存在",
" // 初始化渲染页面",
" },",
" beforeMount () {",
" // 生命周期钩子：模板编译/挂载之前",
" },",
" mounted () {",
" // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）",
" },",
" beforeUpate () {",
" // 生命周期钩子：组件更新之前",
" },",
" updated () {",
" // 生命周期钩子：组件更新之后",
" },",
" activated () {",
" // 生命周期钩子：keep-alive 组件激活时调用",
" },",
" deactivated () {",
" // 生命周期钩子：keep-alive 组件停用时调用",
" },",
" beforeDestroy () {",
" // 生命周期钩子：实例销毁前调用",
" },",
" destroyed () {",
" // 生命周期钩子：实例销毁后调用",
" },",
" errorCaptured (err, vm, info) {",
" // 生命周期钩子：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。",
" console.log(err, vm, info)",
" },",
" methods: {}",
"}",
"</script>\n",
"<style lang=\"scss\" scoped></style>",
"$2"
],
"description": "Log output to console"
}
}
- 新建.vue文件，输入vue,按tab即可创建vue模板
- 我这边列的有点多，你可以根据自己的习惯进行删减
参考网站：
