vue项目配置eslint保存自动格式化问题

目录
  • vue配置eslint保存自动格式化
  • 插件实现按照 ESLint 规则自动格式化
    • 1. 需求插件
    • 2. 修改默认格式化插件
    • 3. 「Ctrl + S」保存时按照 ESLint 规则自动格式化

vue配置eslint保存自动格式化

vue项目中有保存自动格式化,还是很舒服的,满足了大多数强迫症

1,用户设置和工作区设置

2,如何找到配置文件

3,setting.json

4,需要安装的插件

5,设置默认格式化程序

在VSCode中,两个层级的设置分别为:

  • 用户设置:应用于所有工作区的全局设置。
  • 工作区设置:只对当前工作区有效的设置。
  • 相比之下,工作区设置具有更高的优先级,即当工作区设置与用户设置相冲突时,以工作区设置为准,但是一个用户设置就够了

如何找到配置文件位置

  • 方法一:Ctrl + Shift + P 然后搜索 Preferences: Open Settings (UI)
  • 方法二:Ctrl + Shift + P 然后搜索 Preferences: Open Settings (JSON)

setting.json配置

最重要的代码,就下面的,其他的都可以根据自己实际开发去设置

  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  "eslint.format.enable": true,

这个是我百度贴了一些上去

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  "eslint.format.enable": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "editor.fontSize": 18,
  "[vue]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "bracketPairColorizer.depreciation-notice": false // 两个选择器中是否换行
}

需要安装的vscode插件

  • Eslint
  • Prettier ESLint
  • Vetur

选择自动格式化程序

停留在页面,然后右键—选择使用xxx格式化文档,然后出现下方图片

这样,就能实现保存代码的时候自动格式化啦

插件实现按照 ESLint 规则自动格式化

1. 需求插件

  • ESLint (读取 ESLint 配置文件进行语法检测)
  • Prettier ESLint(按照 ESLint 配置文件进行格式化)

2. 修改默认格式化插件

2.1 找到任意代码文件 右键点击代码区域 选择「使用…格式化文档」

2.2 选择「配置默认格式化程序」

2.3 选择「Prettier ESLint」

到此,已经可以实现「Alt + Shift + F」进行自动格式化啦!

3. 「Ctrl + S」保存时按照 ESLint 规则自动格式化

3.1 找到菜单栏的文件 -> 首选项 -> 设置

3.2 点击用户区的设置 JSON 图标 打开 JSON 文件

注意: 工作区和用户区的区别

用户区:应用于当前操作系统用户,只要是在当前电脑上开发,任意项目都会生效该配置(慎重修改)

工作区:只应用于当前项目,如果更换项目配置会失效

3.3 将以下配置粘贴进设置 JSON 文件中

{
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
      "extensions": [
          ".js",
          ".vue",
          ".jsx",
          ".tsx"
      ]
  },
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

3.4 粘贴后如下图

到此为止,即可实现保存自动格式化 。

注意: 如果格式化并未按照 ESLint 规则进行,需要将其他所有格式化插件卸载!例如:Beautify、xxxFormatxxx

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vite项目添加eslint prettier及husky方法实例

    目录 1. 初始化vite项目 2. 添加eslint 3. 添加 prettier 4. 添加 husky和lint-staged 5. 配置commitlint 1. 初始化vite项目 npm init vite Project name: - vite-project // 项目名称,默认 vite-project Select a framework: › react // 选择框架 Select a variant: › react-ts // 选择组合 2. 添加eslint 安装

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

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

  • Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

  • vue2项目增加eslint配置代码规范示例

    目录 正文 1.安装以下eslint插件 1.1 .eslintrc.js文件配置 1.2 .eslintignore文件的配置 2. 安装prettier 3. package.json相关代码 4. vscode的配置 5. 启动项目 正文 eslint用于代码检查,prettier用于代码格式化,具体操作如下 1.安装以下eslint插件 安装以下eslint插件,并增加.eslintrc.js配置文件,.eslintignore配置忽略检查的文件 (1)eslint 用于检查和标示出EC

  • Nuxt项目支持eslint+pritter+typescript的实现

    脚手架安装好nuxt的基本项目 npx create-nuxt-app <项目名>,如:npx create-nuxt-app nuxt-ts,按照提示安装你想要的东西,本次项目预装: Universal模式下koa+PWA+linter+prettier+axios ,默认的项目目录如下: eslint + prettier + vscode 保存自动格式化&修复 本人习惯缩进为4个空格,但是eslint&nuxt生成的项目默认为2个,因此需要更改配置 .editorconf

  • ESLint规范TypeScript代码使用方法

    目录 前导 安装依赖 Rules fix 聊一聊原理 parser plugins extends 总结 前导 ESLint 是一种 JavaScript linter,可以用来规范 JavaScript 或 TypeScript 代码,本文教你怎么在项目中快速把 ESLint 安排上. 怎么写出优雅的代码是一个老生常谈的话题,这其中包含了太多内容可聊,但搞一套标准规范绝对是万里长征第一步.ESLint 致力于如何把规范落地到你的项目中,让你的代码清清爽爽. ESLint 作为一种 JavaSc

  • koa TS ESLint搭建服务器重构版过程详解

    目录 初始化项目目录 安装项目运行所需要的软件包 修改package.json 从.env中加载环境变量 配置路径别名 用法 目录规范 编码风格规范 Eslint 初始化项目目录 yarn init -y 安装项目运行所需要的软件包 生产依赖 yarn add koa koa-router cross-env module-alias dotenv koa:搭建 Koa 服务的核心软件包. koa-router:Koa 路由软件包. koa-bodyparser:解析 POST 请求参数的软件包

  • vue项目配置eslint保存自动格式化问题

    目录 vue配置eslint保存自动格式化 插件实现按照 ESLint 规则自动格式化 1. 需求插件 2. 修改默认格式化插件 3. 「Ctrl + S」保存时按照 ESLint 规则自动格式化 vue配置eslint保存自动格式化 vue项目中有保存自动格式化,还是很舒服的,满足了大多数强迫症 1,用户设置和工作区设置 2,如何找到配置文件 3,setting.json 4,需要安装的插件 5,设置默认格式化程序 在VSCode中,两个层级的设置分别为: 用户设置:应用于所有工作区的全局设置

  • vue+ESLint 配置保存 自动格式化代码

    1. 在.eslintrc.js 添加 vscode 终端启动服务 // 添加⾃定义规则 'prettier/prettier': [ // eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示 'error', { singleQuote: true, semi: false, //结束是否加分号 printWidth: 160//每行最长字符 } ] 2.打开VS code 文件>首选项>设置>扩展>ESLint> // eslint格式

  • 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配置vue下的es6规范自动格式化详解

    前言 最近在写Vue的时候,遇见了js es6格式化问题,因为我平时用vscode在写php,所以会安装一些格式化插件,也包括html-css-js的插件 导致的问题:由于vue语法规范问题,导致保存自动格式化成不被使用的代码格式,出现代码错误等异常 写这篇的时候,我也查阅了很多资料有很多的资料不能被使用,也换过很多的编辑器如:Atom,sublime,webstorm 否掉的编辑器 Atom 这一款编辑器真心颜值高,但是插件是真心不好弄,各种被墙,各种的不适应,所以我决定还是弃掉 sublim

  • vue-cli4项目开启eslint保存时自动格式问题

    最近新建一个vue-cli4的项目,初始化的时候没开启eslint,后面想开启的时候不好配置,这里就做个开启eslint和保存时自动修复格式的总结 vscode首先安装eslint插件 配置vscode的自动保存eslint格式 Ctrl+shift+p 把下面代码复制到里面 "editor.tabSize": 2, "eslint.alwaysShowStatus": true, "eslint.autoFixOnSave": true, &q

  • VS Code 常用自定义配置代码规范保存自动格式化

    目录 自动保存格式化 用户自定义代码片段 必装插件 不装活不了那种 完整json 自动保存格式化 介绍一下我的vscode配置,记录为主,每个人的习惯不一样可以按需调整 必装插件 Prettier - Code formatter 链接: marketplace.visualstudio.com/items?itemN… 其实这一个插件就够了 配置保存自动格式化 "editor.formatOnSave": true 参考官方文档,可以配置哪些文件使用此插件配置 "[java

  • vue-cli3项目配置eslint代码规范的完整步骤

    前言 最近接手了一个项目,由于之前为了快速开发,没有做代码检查.为了使得代码更加规范以及更易读,所以就要eslint上场了. 安装依赖 安装依赖有两种方法: 在cmd中打上把相应的依赖加到devDependencies下,再npm install对应依赖. 在package.json文件加上相应依赖: "eslint-plugin-html": "^6.0.3", "@vue/cli-plugin-eslint": "^3.3.0&qu

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

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

  • vue项目中Eslint校验代码报错的解决方案

    目录 vue Eslint校验代码报错 1.空格缩进,不让使用tab 2.未使用的变量报错 3.分号和引号问题 vue使用Eslint报错 解决办法很简单 vue Eslint校验代码报错 在使用脚手架创建Vue项目时,一般会安装Eslint插件,这个主要是校验代码格式和规范用的,但是它很有点让人抓狂,因为很多校验规则和代码规范,你只要不按照它的格式来,直接导致项目编译报错,运行不了项目,这个是非常令人讨厌的. 它不像idea里安装alibaba插件,校验代码规范只是会提示,并不会导致你项目都不

  • vue项目关闭eslint校验

    简介eslint eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格. 官方文档:https://eslint.org 这篇文章总结了eslint的规则:Eslint规则说明 关闭eslint校验 有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校验. 下面就介绍一下vue项目中如何关闭这个校验. 首先我们在创建一个vue项目的时候,会有一

随机推荐