问题描述

  • 使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题
  • 因为我的 vscode 安装使用 vetur 插件,它默认使用的是 prettier 来格式化代码,从而在拉下代码时,直接格式化了我的代码

分析

  • 这时首先想到的处理办法,是把 webpack 中 eslint 的相关配置关闭,这时,随然报错不见了,但问题并没有解决
  • 这个项目是多人开发,如果我不设置 eslint 检测,那么对其它人来说结果将是灾难性的
  • 所以只好进行vscode局部配置的修正,并重新拉下来代码,配置如下
{
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
}
}
  • 然而,这并没有撤底解决问题。因为我的 vscode 全局配置中,仍然有大量的配置设置,很有可能存在我没有发现的意外问题(地雷)

解决

  • 所以还是要正面解决这个问题。我的方案是将 vscode 配置文件进行同步,保证所有人的编辑器配置是一致的
  • 但是这需要一个前提,就是每一个开发者,都要保证自已的 vscode 中的合局配置必须是空的,是干净的
  • 所以,这也提醒我们,无论是在开发代码时,还是配置环境时,可以局部配置的一定要走局部,不要去污然全局
  • 另外,最好将 vscode 的插件配置信息也同步到项目中,这样就可以保证所有人的代码都可以正常的流转,不必担心引发格式上的意外

.gitignore文件配置【不忽略上传】vscode配置

#设置同步 vscode配置
!/.vscode/settings.json

vue项目中vscode格式化配置和eslint配置冲突的更多相关文章

  1. vscode 格式化代码 与 eslint 有冲突的问题解决

    项目中配置了eslint后,在使用vue界面里格式化的时候总是不一致.然后在配置中加了配置也无效(File - Preference - Setting) 查了下原因是在vue开发的时候我们一般都安装 ...

  2. vue项目中兼容ie8以上浏览器的配置

    1.首先需要在根目录的index.html文件加入如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge& ...

  3. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  4. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  5. 在vue项目中如何添加eslint

    随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...

  6. 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  7. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  8. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  9. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

随机推荐

  1. LeetCode编程训练 - 回溯(Backtracking)

    回溯基础 先看一个使用回溯方法求集合子集的例子(78. Subsets),以下代码基本说明了回溯使用的基本框架: //78. Subsets class Solution { private: voi ...

  2. 【错误解决】Intellj(IDEA) warning no artifacts configured

    : warning no artifacts configured,,上面木有Artifacts的选项,,好尴尬, [解决方案]artifacts,是maven中的概念(项目是maven项目),由于没 ...

  3. 【同余方程组】POJ1006 生理周期

    同余方程组: 先来看一道题目:有物不知其数,三三数之剩二:五五数之剩三:七七数之剩二.问物几何?  然后我们可以做如下变换,设x为所求的数. x%3=2              x ≡ a1(%m1 ...

  4. Java实现堆排序和计数排序

    堆排序代码: 思想:每次都取堆顶的元素,将其放在序列最后面,然后将剩余的元素重新调整为最小堆,依次类推,最终得到排序的序列. import java.util.Arrays; /** * 思路:首先要 ...

  5. SVN和Git的功能和区别,尚学堂SVN和Git学习视频资料免费下载

    对于软件开发人员来说,版本控制系统再熟悉不过了,所谓版本控制系统就是软件项目开发过程中用于储存开发人员所写代码所有修订版本的软件.目前常见的版本控制系统分为集中式版本控制系统(SVN)和分布式版本控制 ...

  6. [Swift]LeetCode227. 基本计算器 II | Basic Calculator II

    Implement a basic calculator to evaluate a simple expression string. The expression string contains ...

  7. [Swift]LeetCode593. 有效的正方形 | Valid Square

    Given the coordinates of four points in 2D space, return whether the four points could construct a s ...

  8. 一张图看懂STM32芯片型号的命名规则

    意法半导体已经推出STM32基本型系列.增强型系列.USB基本型系列.增强型系列:新系列产品沿用增强型系列的72MHz处理频率.内存包括64KB到256KB闪存和 20KB到64KB嵌入式SRAM.新 ...

  9. Spring Cloud Greenwich 正式发布,Hystrix 即将寿终正寝。。

    Spring Cloud Greenwich 正式版在 01/23/2019 这天正式发布了,下面我们来看下有哪些更新内容. 生命周期终止提醒 Spring Cloud Edgware Edgware ...

  10. Python内置函数(32)——input

    英文文档: input([prompt]) If the prompt argument is present, it is written to standard output without a ...