使用eslint将项目中的代码修改统一的缩进
背景
继承了组里师兄师姐写的项目的前端代码,但是是两个人写的,有两格缩进的,有四格缩进的,有字符串外用单引号的,有用双引号的。
于是搜索了一下,可以用eslint强制转化。
eslint在github上的链接:https://github.com/eslint/eslint
安装
- 用VS Code打开刚下载好的项目,npm init项目初始化后(一般不需要这个步骤,这是为了加载各种npm包)
在终端npm install eslint --save-dev
结果:
不建议用 npm install eslint -g全局安装,因为往下会发现eslint的配置有很多选择,不同项目使用的配置可能不一样。 ./node_modules/.bin/eslint --init 在这个项目上初始化eslint,然后会有一个初始化向导。




上面的问题三种选择:
如果选择 Use a popular style guide 有:
如果选择 Answer questions about your style:

完成初始化向导后:
The config that you've selected requires the following dependencies:eslint-plugin-vue@latest
Successfully created .eslintrc.js file in- 根据提示在终端中 npm install eslint-plugin-vue@latest
在终端敲命令
./node_modules/.bin/eslint yourfile.js/yourdir --fix- 在项目文件夹下的.eslintrc.js文件中 ,修改rules
'rules': {
'indent': [
'warn',
'tab'
//强制统一缩进
],
'linebreak-style': [
'error',
'windows'
//Windows的行结尾方式
],
'quotes': [
'warn',
'single'
//单引号
],
'semi': [
'warn',
'never'
//不加分号
]
} - 更多的自定义配置项可以看:
https://www.cnblogs.com/yangshifu/p/9585462.html
遇到的问题
1. ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.
点击右下角的ESLint,选择Allow Everywhere即可。
使用eslint将项目中的代码修改统一的缩进的更多相关文章
- Roslyn 入门:使用 Roslyn 静态分析现有项目中的代码
Roslyn 是微软为 C# 设计的一套分析器,它具有很强的扩展性.以至于我们只需要编写很少量的代码便能够分析我们的项目文件. 作为 Roslyn 入门篇文章,你将可以通过本文学习如何开始编写一个 R ...
- [git]安装git-pylint-commit-hook提高python项目中的代码质量
什么是'git-pylint-commit-hook' 我在工作中,团队为了保证代码和提高代码的质量,要求每个项目都要求安装git-pylint-commit-hook,它是个钩子,会在你提交代码到本 ...
- 针对MSHFlexGrid的一系列通用方法-项目中实践代码分享
1.给MSHFlexGrid填充数据通用方法 '自定义报表填充程序 fgrid Public Function ShowformfData(Resultset As ADODB.Recordset, ...
- 吐槽一下项目中的代码坏味道:滥用java常量
我们的项目中是否充斥着类似以下的代码呢?定义一个专门存放常量的java类(接口),非常多其它类依赖该常量类. public interface IConstant { int ZERO = 0; St ...
- 最新广商小助手 项目进展 OpenGL ES 3D在我项目中引用 代码太多只好选重要部分出来
package com.example.home; import java.io.IOException; import java.io.InputStream; import javax.micro ...
- Vue项目中的http请求统一管理
module.exports = { dev: { // Paths assetsSubDirectory: '/', assetsPublicPath: '/', proxyTable: { /op ...
- 做web项目时对代码修改后浏览器端不生效的应对方法(持续更新)
做web项目时,经常会遇到修改了代码,但浏览器端没有生效,原因是多种多样的,我会根据我遇到的情况逐步更新解决办法 1.运行的时候采用debug模式,一般情况下使用项目部署按钮右边那个按钮下的tomca ...
- Metalama简介3.自定义.NET项目中的代码分析
本系列其它文章 使用基于Roslyn的编译时AOP框架来解决.NET项目的代码复用问题 Metalama简介1. 不止是一个.NET跨平台的编译时AOP框架 Metalama简介2.利用Aspect在 ...
- 使用spring提供的ReflectionUtils简化项目中反射代码的复杂性
在项目中有时候我们会使用到反射的功能,如果使用最原始的方法来开发反射的功能的话肯能会比较复杂,需要处理一大堆异常以及访问权限等问题.spring中提供了ReflectionUtils 这个反射的工具类 ...
随机推荐
- ceph的pg平衡插件balancer
前言 ceph比较老的版本使用的reweight或者osd weight来调整平衡的,本篇介绍的是ceph新的自带的插件balancer的使用,官网有比较详细的操作手册可以查询 使用方法 查询插件的开 ...
- 自动化测试_移动端测试(一) ----- Appium环境搭建
一. 安装node.js 因为Appium是使用nodejs实现的,所以node是解释器,首先需要确认安装好 官网下载node.js:https://nodejs.org/en/download/ 安 ...
- tp5 统一返回json格式
控制器调用 public function json(){ if (request()->isPost()) { return jsonData(1,'转换成功',数据(可不填)); } } 公 ...
- 使用Camtasia创作抖音卡点视频
空闲的时候刷一刷抖音相信已经成为很多人的日常啦,抖音里面的视频形式多种多样,而其中的卡点视频更是被大家热烈追捧.如果你外出旅行拍摄了很多好看的照片,就很适合用卡点视频的形式展现出来. 如果你想要制作这 ...
- 前后端分离之前端vue
npm install --global vue-clivue init webpack my-project cd my-project npm install npm run dev ...
- Centos7安装Nginx详细步骤
前言 Nginx 是一款轻量级的Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 常用用途: ✓ 1. 反向代理 ✓ 2. 正向代理 这里我给来2张图,对正向代理与反响代理 ...
- 1. git简介
1.1 版本控制理解 版本控制 工程设计领域中使用版本控制管理工程蓝图的设计过程,在 IT 开发过程中也可以使用版本控制思想管理代码的版本迭代 集中式版本控制工具 CVS.SVN.VSS等 分布式版本 ...
- mark一下2020已经阅读的书单专栏和源码
1.书籍 已经阅读: 深度工作 代码整洁之道 正在阅读: 敏捷软件开发 程序员修炼之道 程序员思维 计划阅读: 人月神话 数据密集型系统设计 如何阅读一本书 卓有成效的管理者 算法 第四版 sprin ...
- eNSP VLAN划分基础配置及Trunk接口
跨交换机实现VLAN通信拓扑图: 一.配置PC机 ip 并测试相互能否ping通 PC名称 IP 子网掩码 网关 PC1 10.1.1.1 255.255.255.0 10.1.1.254 PC2 1 ...
- uniapp cli版本中如何引入scss?
一.安装依赖 npm i node-sass@4.14.1 sass-loader -D 二.在脚手架版本新建项目成功后,官方为我们准备了uni.scss文件,在这个里面写即可全局使用. ... 一. ...