团队协作统一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模板
  • 我这边列的有点多,你可以根据自己的习惯进行删减

参考网站:

vue组件编码规范

vue 开发命名规范

vue官网风格指南

原文地址:https://www.cnblogs.com/hezhi/p/10205773.html

时间: 2024-11-08 01:49:39

团队协作统一vue代码风格,vscode做vue项目时的一些配置的相关文章

做web项目时对代码改动后浏览器端不生效的应对方法(持续更新)

做web项目时,常常会遇到改动了代码,但浏览器端没有生效,原因是多种多样的,我会依据我遇到的情况逐步更新解决的方法 1.执行的时候採用debug模式,普通情况下使用项目部署button右边那个button下的tomcat7中的run即可,假设使用的是serves中的run serves,这样的情况貌似不会自己主动编译 2.点击project菜单下的clean选项,在打开的窗体中选择你使用的项目,ok,这样会删除tomcat容器中关于该项目的一些信息,然后又一次部署,执行 3.删除电脑中tomca

做web项目时对代码修改后浏览器端不生效的应对方法(持续更新)

做web项目时,经常会遇到修改了代码,但浏览器端没有生效,原因是多种多样的,我会根据我遇到的情况逐步更新解决办法 1.运行的时候采用debug模式,一般情况下使用项目部署按钮右边那个按钮下的tomcat7中的run就行,如果使用的是serves中的run serves,这种情况貌似不会自动编译 2.点击project菜单下的clean选项,在打开的窗口中选择你使用的项目,ok,这样会删除tomcat容器中关于该项目的一些信息,然后重新部署,运行 3.删除电脑中tomcat文件夹,重新解压,然后在

iOS使用代码调整约束做动画效果时出现Unable to simultaneously satisfy constraints.

出现这个问题时, 首先应该仔细看错误, 去除多余的存在冲突的约束, Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect;

Vue.js系列(一):Vue项目创建详解

引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vue项目,以及对项目目录结构的解释说明,使大家清晰的了解Vue项目的开发流程. 简介 Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项

多人协作项目如何保持代码风格统一

原文链接:https://liushiming.cn/2020/02/20/keep-same-code-style/ 概述 多人在同一个项目协作的时候保持统一的编码风格很重要.但说起来容易做起来难,每个人都有自己的编码习惯,不去对比自己都难以意识到.本文我推荐一些做法.工具可以帮助我们尽量保持同样的风格. 选择go语言 如果可以,选择go语言作为编程语言. go语言自带代码格式化命令gofmt,要求所有代码都有一致的代码风格,甚至不允许未使用的import和未使用的变量定义在程序里,否则编译不

vscode代码保存时自动格式化成ESLint风格(支持VUE)

一.问题 vscode的默认的代码格式化ctrl+shift+f 无法通过eslint的代码风格检查是一个非常蛋疼的问题 同样在进行vue项目开发的时候,使用eslint代码风格检查是没啥问题的,但是eslint自动格式化是我想去搞出来的. 在保存的时候,能够使得vscode代码自动格式化成eslint风格的代码,并且支持在html和vue中的代码 二.解决 1.安装 eslint 插件 2.打开用户配置 在用户设置中填写如下配置: { "eslint.autoFixOnSave":

如何在vscode中用standard style 风格去验证 vue文件

1 JavaScript Standard Style简介 本工具通过以下三种方式为你(及你的团队)节省大量时间: 无须配置. 史上最便捷的统一代码风格的方式,轻松拥有. 自动代码格式化. 只需运行 standard --fix 从此和脏乱差的代码说再见. 提前发现风格及程序问题. 减少代码审查过程中反反复复的修改过程,节约时间. 无须犹豫.再也不用维护 .eslintrc, .jshintrc, or .jscsrc .开箱即用. 安装: npm i standard -g 关于JavaScr

Vue代码的风格指南

这里是官方的 Vue 特有代码的风格指南(原官方文档链接).如果在工程中使用 Vue,为了回避错误.小纠结和反模式,该指南是份不错的参考. 我们把所有的规则归为了四个大类: 优先级 A:必要的 这些规则会帮你规避错误,所以学习并接受它们带来的全部代价吧.这里面可能存在例外,但应该非常少,且只有你同时精通 JavaScript 和 Vue 才可以这样做. 优先级 B:强烈推荐 这些规则能够在绝大多数工程中改善可读性和开发体验.即使你违反了,代码还是能照常运行,但例外应该尽可能少且有合理的理由. 优

VScode设置vue文件中保存自动格式化代码以及settings.json文件的配置。

最近在做vue 项目中,由于安装有代码检测工具ESlint,每次写完代码后就发现很多语法警告,查找配置好多也有许些小问题,现记录一份settings.json配置文件. 1.设置如下: 2.settings.json文件配置如下: { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候