团队协作统一vue代码风格，vscode做vue项目时的一些配置

Posted 2021-01-31 hezhi

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>
",
        "  </div>",
        "</template>
",
        "<script>",
        "import OtherComponent from '@/components/OtherComponent'
",
        "export default {",
        "  name: 'MyName',",
        "  components: {",
        "    OtherComponent",
        "  },",
        "  directives: {},",
        "  filters: {},",
        "  extends: {},",
        "  mixins: {},",
        "  props: {},",
        "  data () {",
        "    return {
",
        "    }",
        "  },",
        "  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>
",
        "<style lang="scss" scoped></style>",
        "$2"
    ],
    "description": "Log output to console"
  }
}

• 新建.vue文件，输入vue,按tab即可创建vue模板
• 我这边列的有点多，你可以根据自己的习惯进行删减

参考网站：

vue组件编码规范

vue 开发命名规范

vue官网风格指南