vscode 开发项目, Prettier ESLint的配置全攻略(基础篇)
我们在做项目尤其是多人合作开发的时候经常会因为不同的开发规范和代码风格导致出现冲突,
为了能统一代码风格和规范我们需要使用到prettier和eslint,接下来就一vscode编辑器为例详细讲解下:
一、vscode的配置
vscode 的基础配置包括编辑器本身的设置比如主题字体,窗口,布局等等还包括扩展的设置
1.打开设置窗口
打开的方法: 1.快捷键 ctrl+, 2.文件->首选项->设置 3.左下角的管理(齿轮形状)->设置
打开如下图的设置窗口 :
在设置窗口中有用户和工作区之分:
用户设置是指本台电脑上所有使用vscode打开项目文件的配置;
工作区设置是指当前vscode 打开的文件夹下的所有项目文件的配置;
因此优先级为(工作区>用户)
2.打开自定义设置json文档
由于设置窗口中设置的项目繁多,而且好多是默认设置的,为了能够快速直观的看到自定义的设置有哪些,可以打开settings.json文件
打开方法: 1.很多设置项中有 在settings.json中编辑 的提示,可以直接点击(在设置窗口上方的 搜索设置 中输入'setting'可以快速定位到 该提示)
2. 输入 ctrl+shift+p 输入'setting' 会展示出setting.json的选项点击进入即可
当然自定义设置也是区分用户和工作区的:
用户的setting.json 文件一般存在 C:\Users\[PCNAME]\AppData\Roaming\Code\User\settings.json
工作区的setting.json 在工作区根目录下的 .vsocde文件夹下(配置只在当前工作区有效,放在项目中还可以解决不同开发者各自vscode有各自不同配置导致的冲突)
3.如何进行设置
1).可以在设置窗口中直接对每个设置项进行设置,相应的settings.json会自动生成对用的JSON文本
2).也可以在settings.json文本中直接输入相应的JSON文本进行设置,如果不知道某一项的JSON文本格式可以点击设置项,再点击设置项左侧显示的齿轮图标然后选择复制JSON文本
二、Prettier
Prettier是一个使用非常方便的用于格式化代码的第三方的插件,它规定了许多代码格式规则,并提供了部分配置项.几乎支持目前所有主流的文档类型 (详情可参见 官方文档)
Prettier是专注于格式化的工具它本身规定了一定的代码格式,并不是所有的格式规则都允许自行修改配置,好处是你可以安装后零配置使用.
1.安装Prettier
安装和使用prettier主要有两种方式:
a.通过安装npm包,使用命令执行
1. npm install --save-dev --save-exact prettier 安装包(官方提供的安装命令 --save-exact 是确定版本号)
2. npx prettier --write . 格式化所有文档
3.也可以设置git hooks 在进行git 操作的时候自动执行prettier格式化文档
b.安装vscode的prettier扩展(推荐)
在settings.json文件中加入 "editor.defaultFormatter": "esbenp.prettier-vscode" 或者在文档右键点击 "使用...格式化文档" 设置默认使用Prettier格式化文档
并且可以设置保存是自动格式化 "editor.formatOnSave": true,
打开要格式的文档在vscode右下角有Prettier图标并且前方有对钩标识,说明Prettier可以格式化当前文档.(格式化后变为单个对钩)
2.Prettier的配置
a.在vscode扩展的设置中找到prettier的相关设置,对设置项进行自定义设置
b.在 settings.json中输入对应的json文本设置
c.在项目跟目录下创建 .prettierrc.json或者.prettierrc文件 并输入json文本设置 自定义
优先级 prettierrc>settings.json
三、ESLint
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。(详见 ESLint官方文档 )
从官方的介绍可以看出eslint 不仅可以做代码的书写规范,比如变量声明未使用,是否允许console等等还可以有格式上的比如结尾是否加分号,字符串是单引号还是双引号等等
Eslint 被设计为完全可配置的这点和Prettier不同,那为什么还要用prettier呢?因为prettier拥有更多的格式化规则比如
1.安装ESLint
安装和使用eslint主要有两种方式:
a.通过安装npm包,使用命令执行
1. npm install --save-dev eslint 安装包
2. ./node_modules/.bin/eslint --init 或者 npx eslint --init 生成 .eslintrc.js 配置文档也可以自己创建
3.也可以在全局而不是本地安装 ESLint (使用 npm install eslint --global)。但是,你使用的任何插件或可共享配置都必须安装在本地.
b.安装vscode的eslint扩展
2.Eslint配置
1.配置文件
a.在新建的.eslintrc.js文件中可以加入自己的配置
b.在 settings.json中输入对应的json文本设置
c.也可以在package.json 或者yaml文件中定义
注意优先顺序为
.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc(弃用)
package.json
2.配置格式(官方配置说明)
.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/vue3-essential', '@vue/standard'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
indent: ['error', 4, { SwitchCase: 1 }],
quotes: ['error', 'single', { avoidEscape: true }],
semi: [0, 'never'],
}
}
说明:
配置文件中可以配置语言模式,环境变量,解析器,插件,规则等等
配置项 | 值类型 | 说明 |
root | boolean |
每个文件和项目的父级文件夹下都可以有eslint配置文件,eslint会向上查找知道根目录,并以最近的优先级最高. 如果设置为true则不在向上查找,这样设置的好处是不同项目或者文件可以有不同配置规则互不影响. |
rules | object |
规则的配置 1.key 为要定义的规则ID 如:semi(结尾分号) quotes(引号) 内容形式可以为字单个值或者数组. "semi": "error", 单个值以及数组的第一个值为规则提醒的形式,可以为如下内容:
数组的第二个值为规则的标准 "quotes":['errror","double"] 代表必须使用双引号否则直接报错退出程序. 单个值会使用eslint默认的规则标准 |
vscode 开发项目, Prettier ESLint的配置全攻略(基础篇)的更多相关文章
- Retrofit全攻略——基础篇
实际开发过程中一般都会选择一些网络框架提升开发效率.随着Google对HttpClient 摒弃和Volley框架的逐渐没落.OkHttp開始异军突起.而Retrofit则对OkHttp进行了强制依赖 ...
- Retrofit全攻略——进阶篇
最近事比较多,距离上次写文章已经过去了一个月了.上一篇文章Retrofit全攻略——基础篇 介绍了Retrofit的基础用法,这篇文章介绍点进阶的用法. 打印网络日志 在开发阶段,为了方便调试,我们需 ...
- Android-x86虚拟机安装配置全攻略
转自Android-x86虚拟机安装配置全攻略 注:这里安装从简,具体请参考虚拟机Vmware安装运行安卓4.0详细教程 Android-x86虚拟机安装配置网上有很多,但是全部说明白的确不多,希望这 ...
- Ubuntu下嵌入式Qt开发环境配置全攻略
http://qpcwth.blog.163.com/blog/static/20993024620139151424822/ 在安装的过称中,出现一些问题,注意试想: 1.本次开发环境的配置,是基于 ...
- 长平狐 Android-x86虚拟机安装配置全攻略
Android-x86虚拟机安装配置网上有很多,但是全部说明白的确不多,希望这篇文章能把主要的配置介绍给您,帮助您少走一些弯路. 本文分别针对VMWare和Virtual Box两种虚拟机介绍安装配置 ...
- Xcode 4.1~4.6 + iOS 5、iOS 6免证书(iDP)开发+真机调试+生成IPA全攻略
原创文章,欢迎分享:未经许可,不得转载:版权所有,侵权必究 开发环境使用的是目前为止最新的稳定版软件:Mac OS X Lion 10.7 + Xcode 4.1 目前Xcode 4.2 Previe ...
- Tomcat配置全攻略
tomcat的的下载地址http://www.apache.org/dist/jakarta/tomcat-4/ 1.安装jdk,详细操作请参考本站windows 2k和redhat 8.0下java ...
- StartCom 申请 SSL 证书及 Nginx HTTPS 支持配置全攻略
来源:https://www.williamyao.com/index.php/archives/1397/ 前言 最近收到 StartCom 的邮件,数字证书即将过期,想到去年在 StartSSL ...
- sublime配置全攻略
大家好,今天给大家分享一款编辑器:sublime text2 我用过很多编辑器, EditPlus.EmEditor.Notepad++.Notepad2.UltraEdit.Editra.V ...
随机推荐
- APUE1--3.8-3.10wirte、read函数以及IO效率
1read函数 #include<unistd.h> ssize_t read(int fd,void* buf,size_t nbytes) 返回值:读到的字节数,若已到文件尾,返回0; ...
- Bean实例化方式
https://blog.csdn.net/diaosinixiheixiu/article/details/78919395 https://www.cnblogs.com/deng-cc/p/89 ...
- jQuery--文档处理案例
需求 如上图,实现左右两边的选择菜单可以左右移动,'>'按钮一次只能移动被选中的一个菜单,'>>'按钮一次移动所有被选择的菜单,'>>>'按钮 将所有菜单进行移动, ...
- 使用 Spring 通过什么方式访问 Hibernate?
在 Spring 中有两种方式访问 Hibernate:控制反转 Hibernate Template 和 Callback.继承 HibernateDAOSupport 提供一个 AOP 拦截器.
- 学习 Haproxy (六)
HAProxy HAProxy是免费 高效 可靠的高可用及负载均衡解决方案,该软件非常适合于处理高负载站点的七层数据请求,HAProxy的工作模式使其可以非常容易且安全地集成到我们现有的站点架构中.使 ...
- L298N双H桥集成电路板的双H桥是什么意思?为什么要叫双H桥?L298N工作原理
H桥是一个典型的直流电机控制电路,因为它的电路形状酷似字母H,故得名与"H桥".4个三极管组成H的4条垂直腿,而电机就是H中的横杠. 控制两个三极管的导通来控制电流方向,从而实现电 ...
- ESD@TVS选型
一.工作原理 ESD ESD静电保护元件,又称静电抑制二极管.ESD是多个TVS晶粒或二极管采用不同的布局做成具有特定功能的多路或单路ESD保护器件,主要应用于各类通信接口静电保护,如USB.HDMI ...
- 玩别人玩剩下的:canvas大雪纷飞
canvas大雪纷飞 前言:正好业务触及到canvas,看完api顺手写个雪花效果,因为之前看到过很多次这个,主要看思路,想象力好的可以慢慢去创作属于自己的canvas效果 思路: 利用画圆arc() ...
- Codepen 每日精选(2018-3-24)
按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以打开原始页面. 纯 css 画的抽象小鸟https://codepen.io/gregoryb/f... 纯 css 制作 ...
- js读取cookie 根据cookie名称获取值的方法
//方法1 //存在问题:如果cookie中存在 aaaname=aa;name=bb 获取name的值就会出现错误function getCookie(c_name){ if (document.c ...