vscode使用Eslint+Prettier格式化代码的详细操作

目录
  • step 1
  • step 2
  • step 3
  • step 4
  • step 5
  • 最后
  • 效果

step 1

1、安装Eslint插件和Prettier插件

2、 安装eslint

npm install eslint -g

step 2

1、初始化项目

npm init -y

2、生成eslint配置文件

npx eslint --init

以下是我的配置

完了之后生成一个.eslintrc.json的文件

step 3

1、vscode需要配置保存自动化格式

⚙ -> 设置 -> Format On Save =》 （保存时格式化文件）

2、以什么风格格式化代码。

⚙ -> 设置 -> Default Formatter -> 选择Prettier项

3、保存时总是执行fixAll

fixAll那选择true

4、总体配置：setting.json

{
  "workbench.colorTheme": "Default Dark+",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

到这一步基本的保存后都可以有eslint基础的格式化了

step 4

1、配置Prettier，创建一个 .prettierrc.json文件

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

然后写入配置：（按自己）

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true
}

然后检测vscode设置的Prettier: Enable勾选状态

这时候可以保存后可以prettier格式化了，但是不会eslint不会显示红色

step 5

关闭所有不必要或可能与Prettier冲突的规则。

1、安装eslint-config-prettier和eslint-plugin-prettier

npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier

2、然后在.eslintrc.json的 extends 最后加入plugin:prettier/recommended

确保下面格式是prettier

3、保存，重启vscode，爆红也生效了。

到这里就eslint和prettier就配完了

最后

一般情况下直接在.prettierrc.json配置即可，如果prettier没有这个配置的，就可以在.eslintrc.json中的“rules”中配置，举个例子：（配置全等）

效果

到此这篇关于vscode使用Eslint+Prettier格式化代码的文章就介绍到这了,更多相关vscode格式化代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vscode中eslint插件的配置（prettier配置无效）

    用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个eslint插件 装完后在文件----->首选项------->设置里找到settings.json(快捷键忘了) eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用).保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准 &

  • 2020最新版vscode格式化代码的详细教程

    这篇关于vscode格式化配置研究初稿,具体内容如下所示: 前言 之前用vscode进行格式化的时候都是在百度和谷歌上搜"vscode格式化代码"然后直接copy别人.细节的配置一直没去看过. 但是最近一段时间开发项目的时候发现和同组的提交代码的时候格式总是不统一.于是这两天专门看了看插件的官方文档,研究研究. 今天初步有一点研究结果了.会配置一点点了.写此博客与大家共同参考.不足的地方欢迎大家补充,错误的地方欢迎大家纠错. 文章内容包括两个部分:一是理论,二是我的settings.j

  • vscode 配置eslint和prettier正确方法

    vscode 配置eslint和prettier正确方法

    ESlint ESLint 是一款语法检测工具.因为 JavaScript 本身是一门灵活的动态语言,一千个 JavaScriptor 就有一千种写法.为了方便人们的理解,快速上手别人的代码. 说明 在开发项目的时候,往往会通过eslint来检查代码格式,而prettier用来进行代码的格式化.本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置. vscode 安装插件 首先,需要在vscode上安装eslint和prettier的插件. 项目中的配置文件

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

  • Vscode编辑器的巧妙用法(快速格式化代码的方法)

    Vscode编辑器的巧妙用法(快速格式化代码的方法)

    相信不少人,写代码忘我的时候,都会忘记层级之间的缩进,导致代码,看着非常不清晰,这个时候,你是否还在手动一点点缩进,这个时候,我们需要利用编辑器的强大功能啦 笔者使用Vscode,一个很好用的编辑器.有许多优秀的插件等待大家的发现 这里笔者推荐 一个格式化神器 看这安装量就知道不错了吧, 相信不少人代码都可能写这样 结构没有层级 安装插件后只需要执行 ctrl + sahift + p 输入 Beautify file 插件将会自动识别帮你进行格式化 但是有些小伙伴,在vue,react等框架页

  • vscode使用Eslint+Prettier格式化代码的详细操作

    vscode使用Eslint+Prettier格式化代码的详细操作

    目录 step 1 step 2 step 3 step 4 step 5 最后 效果 step 1 1.安装Eslint插件和Prettier插件 2. 安装eslint npm install eslint -g step 2 1.初始化项目 npm init -y 2.生成eslint配置文件 npx eslint --init 以下是我的配置 完了之后生成一个.eslintrc.json的文件 step 3 1.vscode需要配置保存自动化格式 ⚙ -> 设置 -> Format O

  • 详解如何在vue项目中使用eslint+prettier格式化代码

    对于前端代码风格这个问题一直是经久不衰,每个人都有自己的代码风格,每次看到别人代码一团糟时候我们都会吐槽下.今天给大家介绍如何使用eslint+prettier统一代码风格. 对于eslint大家应该比较了解了,是用来校验代码规范的.给大家介绍下prettier,prettier是用来统一代码风格,格式化代码的,支持js.ts.css.less.scss.json.jsx.并且集成了vscode.vim.webstorm.sublime text插件. 如果你的项目中采用的是ellint默认规则

  • 实例详解Vue项目使用eslint + prettier规范代码风格

    团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格.因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格. 幸好,我们有 eslint 和 prettier . eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格.那为什么还需要prettier呢?我们先来对它们作一个简单的了解. 各种linters 总体来说,linters有两种能力

  • eslint+prettier统一代码风格的实现方法

    1.实现效果 Eslint校验代码语法,prettier统一格式化代码,按下保存自动修复eslint错误,自动格式化代码. 2.安装vscode插件 Vetur ESLint Prettier - Code formatter 3.配置vscode设置 文件–首选项–设置,打开json模式,添加以下配置: { // 控制工作台中活动栏的可见性. "workbench.activityBar.visible": true, //主题设置 "workbench.colorThem

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • shell脚本快速创建格式化磁盘与详细操作步骤

    这篇文章给大家介绍如何利用shell脚本实现对一个磁盘进行分区格式化挂载,具体内容如下所示: 查看当前磁盘分区状况 查看当前磁盘的一个分区状况,使用命令:fdisk -l fdisk -l //查看磁盘信息 lsblk 让硬盘进入分区模式 fdisk /dev/sdb 命令(输入 m 获取帮助): m //打印选项菜单 添加新的分区: 命令(输入 m 获取帮助):n //添加一个分区 选择分区类型: Select (default p): e //输入e表示创建扩展分区 分区数量: 分区号 (1

  • vue基础ESLint Prettier配置教程详解

    vue基础ESLint Prettier配置教程详解

    目录 引言 前言 安装 VsCode 插件 配置 VsCode "Workspace.json" 配置 vue 的 "package.json" 配置 vue 的 ".eslintrc.js" 配置 vue 的 ".prettierrc" 配置 "eslint --fix" 一键修复 配置 ESlint 提交时检测 测试配置效果 问题排查 尾声 引言 VsCode + Vue + ESLint + Pret

  • vue项目中使用eslint+prettier规范与检查代码的方法

    1.前言   在团队协作中,为避免低级 Bug.以及团队协作时不同代码风格对彼此造成的困扰与影响,会预先制定编码规范.使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量.EsLint 则是其中一个很好的工具. EsLint 提供以下支持: ES6 AngularJS JSX Style 检查 自定义错误和提示 EsLint 提供以下几种校验: 语法错误校验 不重要或丢失的标点符号,如分号 未被使用的参数提醒 漏掉的结束符,如} 确保样式的统一规则,如 sass 或者

  • vscode配置setting.json文件实现eslint自动格式代码

    一.ESlint+Vetur 实现ESlint代码规范 二.重点----旧版本(旧版本配置在setting.json 会出现警告) { "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, { "language"

随机推荐