问题描述

  • 使用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. 通用类 对象和XML互转

    public class XMLHealper { /// <summary> /// 将自定义对象序列化为XML字符串 /// </summary> /// <para ...

  2. ASP.NET Core Web App应用第三方Bootstrap模板

    引言 作为后端开发来说,前端表示玩不转,我们一般会选择套用一些开源的Bootstrap 模板主题来进行前端设计.那如何套用呢?今天就简单创建一个ASP.NET Core Web MVC 模板项目为例, ...

  3. [Swift]LeetCode154. 寻找旋转排序数组中的最小值 II | Find Minimum in Rotated Sorted Array II

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  4. ASP.NET Core Web API 与 SSL

    SSL 一直没有真正研究过SSL,不知道下面的理解是否正确. SSL是Secure Sockets Layer的缩写,它用来保护服务器和客户端之前的通信.它是基于信任+加密的概念. 在介绍SSL的原理 ...

  5. MySQL如何系统学习

    MySQL是当下互联网最流行的开源数据库.不管你使用或者学习何种编程语言,都将会使用到数据库,而MySQL则是应用最为广泛的数据库,没有之一! 之前在我的博客上也发布过一些MySQL优化配置项,都收到 ...

  6. Python内置函数(45)——object

    英文文档: class objectReturn a new featureless object. object is a base for all classes. It has the meth ...

  7. java代码之美(6)---guava之multimap

    guava之multimap 上一篇讲到Multiset它可以对存入相同元素做一个计数的功能,那multimap呢? 一.概述 1.基本介绍和案例说明 multimap和MultiSet的继承结果很相 ...

  8. 《深入理解Java虚拟机》-----第2章 Java内存区域与内存溢出异常

    2.1 概述 对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的皇帝又是执行最基础工作的劳动人民——拥有每一个对象的“所有权”,又担负着每一个对象生命开始到终结的维护责任 ...

  9. DDD实战进阶第一波(十五):开发一般业务的大健康行业直销系统(总结篇)

    前面我们花了14篇的文章来给大家介绍经典DDD的概念.架构和实践.这篇文章我们来做一个完整的总结,另外生成一个Api接口文档. 一.DDD解决传统的开发的几大问题: 没有描述需求的设计模型:而是直接通 ...

  10. C#版 - Leetcode 504. 七进制数 - 题解

    C#版 - Leetcode 504. 七进制数 - 题解 Leetcode 504. Base 7 在线提交: https://leetcode.com/problems/base-7/ 题目描述 ...