Webstorm和VsCode 统一格式化配置

这篇具有很好参考价值的文章主要介绍了Webstorm和VsCode 统一格式化配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一。下载依赖包
package.json

"@babel/core": "^7.22.11",
"@babel/eslint-parser": "^7.22.11",						// ESLint的Babel解析器代替babel-eslint
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",						// vue 专门的 ESLint 规则插件
"@vue/cli-plugin-router": "^5.0.8",
"@vue/cli-plugin-vuex": "^5.0.8",
"@vue/cli-service": "^5.0.8",

"@vue/eslint-config-standard": "^6.1.0",(当前版本无法下载)				// vue standarad 风格配置

"eslint": "^8.48.0",												// js代码的质量检查工具
"eslint-config-prettier": "^9.0.0",							// 用 prettier 的规则,覆盖掉 eslint:recommended 的部分规则
"eslint-plugin-prettier": "^5.0.0",							// 将prettier 的能力集成到 eslint 中
"eslint-plugin-vue": "^7.20.0",								// 用ESLint检查.vue文件的<template>和<script>
"lint-staged": "^14.0.1",
"prettier": "^3.0.2",												// 代码风格的约束
"vue-eslint-parser": "^9.3.1",
"vue-template-compiler": "^2.7.14",
npm uninstall eslint babel-eslint --save-dev

package.json //提交代码进行eslint校验

"gitHooks": {
    "pre-commit": "lint-staged"
  },
npm install prettier --save-dev
npm install --save-dev @babel/core @babel/eslint-parser @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue lint-staged prettier vue-eslint-parser vue-template-compiler

二。webstorm

1.webstorm vue 格式化,webstorm,vscode,vue.js

2.webstorm vue 格式化,webstorm,vscode,vue.js

3.webstorm vue 格式化,webstorm,vscode,vue.js

4.根目录新建.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
      'plugin:vue/essential', 
      'plugin:vue/recommended', 
      'eslint:recommended', 
      'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}


5.根目录新建.prettierrc.js

module.exports = {
  eslintIntegration: true, 
  printWidth: 120, // 一行最多 120 字符(默认80)
  tabWidth: 2, // 每个tab相当于多少个空格(默认2)
  useTabs: false, // 是否使用tab进行缩进(默认false)
  semi: false, // 行尾需要有分号(默认true)
  singleQuote: true, // 使用单引号(默认false)
  quoteProps: 'as-needed', // 对象的 key 仅在必要时用引号
  jsxSingleQuote: false, // jsx 不使用单引号,而使用双引号
  trailingComma: 'none', // 多行使用拖尾逗号(默认none)
  bracketSpacing: true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"(默认true)
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾,而不是另起一行(默认false)
  htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号(默认avoid:添加括号)
  endOfLine: 'auto' // 行尾换行符
}

6.根目录新建lint-staged.config.js

module.exports = {
  '*.{js,jsx,vue}': 'vue-cli-service lint'
}

7.重启项目

tips
webstorm scss url报红
webstorm vue 格式化,webstorm,vscode,vue.js

三。vscode配置

1.安装prettier、eslint

2.配置.vscode settings.json

{
  // 默认使用prettier格式化
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  //配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "html", "vue"],

  // 代码保存时,自动执行ESlint格式化代码
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode"
}


3.重启vscode文章来源地址https://www.toymoban.com/news/detail-787520.html

到了这里,关于Webstorm和VsCode 统一格式化配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vscode 配置rust、golang代码格式化方法

    点击左下角齿轮按钮,点击Settings,如下图: 点击右上角切换到Settings.json文件。如下图 增加rust、golang 配置如下,假如存在默认格式化配置请注释或删除。 重启vscode ide, ​ 尝试编写rust、golang 代码,然后按cmd/control+s 按钮保存,即可自动格式化代码。        

    2024年02月08日
    浏览(58)
  • 第二章 React项目配置ESlint和Prettier实现自动格式化代码以及统一代码风格

    欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、请求、组件封装以及UI(Ant Design)框架的使用。让我们一起掌握React,开启前端开发的全新篇章! 需要准

    2024年02月03日
    浏览(74)
  • VSCode C/C++ 格式化配置【最完整准确版本】

    一、下载Clang-format 1、在VSCode插件商店下载 C/C++插件 和 Clang-format 插件 二、生成 .clang-format 文件 2、去到: C:Users你的用户名.vscodeextensionsms-vscode.cpptools-1.14.4-win32-x64LLVMbin 3、打开终端,cd到此处,执行以下代码: .clang-format.exe -style=\\\"llvm\\\" -dump-config .clang-format 4、然后就会得

    2024年02月05日
    浏览(42)
  • vscode自动格式化插件配置说明(Prettier - Code formatter)

    1、在应用商店搜索Prettier并下载 2、下载完成之后点击扩展设置  3、点击右上角json配置文件  4、在文件中添加如下代码 5、如果需要格式化vue文件,建议配合ESLint、Vetur两个插件一起使用  一款好用的eslint自动修复插件:eslint-config

    2024年02月12日
    浏览(57)
  • vscode配置Volar对vue3的格式化支持

    在浏览vue的官方文档时,看到了一句Volar VSCode 插件为 Vue SFC 提供了开箱即用的格式化功能,官方推荐的,立马试试 在vscode中启用volar时,鼠标右键会显示使用…进行格式化 选择volar 通过项目vscode编辑器配置来保存时自动进行格式化 在项目根目录下创建以下文件并配置 .vsco

    2024年02月13日
    浏览(60)
  • VSCode 配置 python 代码格式化工具(yapf,autopep8)

    需要注意的是,yapf的配置选项都是可选的,你可以根据自己的需要选择使用哪些选项。不过,使用太多选项可能会导致代码格式化的规则变得复杂,对代码的可读性有影响。因此,建议尽量使用最少的选项来保持代码的简洁性。 aggressive: 这个选项表示在格式化代码时使用更

    2024年02月09日
    浏览(95)
  • vscode vue3开发常用插件(附Prettier格式化配置)

    1、Chinese (Simplified) (简体中文) Language 2、Prettier - Code formatter 3、Vue 3 Snippets 4、Vue Language Features (Volar) 5、git graph 5、Auto Close Tag 6、Vue Theme 按ctrl+shift+p,搜索setting进入用户设置(全局),添加下面规则: 需要注意的是,prtttier格式化可以配置在很多文件上,配置字段也不太一样

    2024年02月14日
    浏览(60)
  • VScode自动格式化代码(tab缩进、符号空格)配置beautify插件使用

    安装插件 在插件库搜索beautify,会弹出很多插件 你需要根据你自己的语言选择对应的插件安装,尽量选择在维护中的插件 我是做前端的,所以选择的是beautify blade,格式化语言:javascript, JSON, CSS, Sass, and HTML ![在这里插入图片描述](https://img-blog.csdnimg.cn/cc42b7d4f0b549a78d16c69e7d33

    2024年02月12日
    浏览(55)
  • vscode中怎样格式化js代码_vscode如何格式化代码

    vs code格式化代码的快捷键如下: 在Mac上 Shift+ Option+F 在Ubuntu上 Ctrl+ Shift+I 但是自带的格式化并不能满足我的需求,这个时候,不得不说插件大法好。 代码格式化为eslint风格 需要插件:eslint

    2024年02月16日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包