iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中使用eslint和editorconfig方式
  • 247
分享到

Vue中使用eslint和editorconfig方式

2024-04-02 19:04:59 247人浏览 独家记忆
摘要

目录使用eslint和editorconfig方式使用eslint的好处安装eslint文件配置说明启动命令配置自动检查语法配置添加editorconfigVue editorcon

使用eslint和editorconfig方式

使用eslint的好处

1、避免运行时因格式问题报错

2、方便团队合作,代码风格统一

安装eslint

命令行执行:

  npm i 
  eslint eslint-config-standard 
  eslint-plugin-standard 
  eslint-plugin-promise 
  eslint-plugin-import 
  eslint-plugin-node 
  eslint-plugin-html -D

eslint-plugin-html插件识别html文件中的script标签里面的javascript

文件配置说明

项目目录新建.eslintrc文件:

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "no-new": "off"
  }
}

启动命令配置

在package.JSON的scripts中加入:

"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"

client/ 为要检查的文件夹

执行:

npm run lint          //语法检查
npm run lint-fix      //自动修复语法检查出现的问题

自动检查语法配置

命令行执行:

npm i eslint-loader babel-eslint -D

然后在.eslintrc文件中添加"parser": "babel-eslint":

{
 "extends": "standard",
  "plugins": [
    "html"
  ],
  "parser": "babel-eslint",
  "rules": {
    "no-new": "off"
  }
}

webpack的配置文件的module.rules中加入:

{
   test: /\.(vue|js|jsx)$/,
   loader: 'eslint-loader',
   exclude: /node_modules/,
   enforce: 'pre'   //预处理
},

添加editorconfig

在项目目录新建.editorconfig文件:

root = true
    
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

vue editorconfig编辑器配置说明

editorconfig是什么,有什么用

editorconfig是定义编码样式的配置文件,帮助多人合作项目或者不同编辑器下保持代码风格统一。

editorconfig示例

# Http://editorconfig.org  (Editorconfig 的官方网站)
# 控制 EditorConfig 约定的范围 
root = true 

# 匹配全部文件
[*]

# 设置字符集
charset = utf-8

# 缩进风格 可选"space"、"tab"
indent_style = space

# 缩进大小 可以是数字(空格数), tab(如果tab大小没设置则按编辑器默认tab大小)
indent_size = 2

# tab的宽度
tab_width = 4

# 结尾换行符,可选"lf"、"cr"、"crlf"
end_of_line = lf

# 文件最后插入一个空行
insert_final_newline = true

# 删除行尾空格
trim_trailing_whitespace = true

# 匹配.java结尾的文件
[*.java]

# 匹配.md结尾的文件
[*.md]
trim_trailing_whitespace = false

root=true 控制 EditorConfig 约定的范围 , Visual Studio 会在打开的文件的目录和每个父目录中查找名为 .editorconfig 的文件。 到达根文件路径时或找到具有 root=true 的 .editorconfig 文件时搜索结束。

检查是否生效

在项目的 js 文件中使用 tab 键进行缩进,分别修改 indent_size 属性值为 2 和 4,观察是否有变化。

如果没有任何变化,说明还没有安装 Editorconfig 插件。

Editorconfig 插件

该插件的作用是告诉开发工具,如 WEBstORM 自动去读取项目根目录下的 .editorconfig 配置文件,如果没有安装这个插件,光有一个配置文件是无法生效的。

Webstorm 2017.1 版本之后都是自动安装这个插件的。

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

--结束END--

本文标题: Vue中使用eslint和editorconfig方式

本文链接: https://www.lsjlt.com/news/149679.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中使用eslint和editorconfig方式
    目录使用eslint和editorconfig方式使用eslint的好处安装eslint文件配置说明启动命令配置自动检查语法配置添加editorconfigvue editorcon...
    99+
    2022-11-13
  • Vue中怎么使用eslint和editorconfig
    这篇文章主要介绍“Vue中怎么使用eslint和editorconfig”,在日常操作中,相信很多人在Vue中怎么使用eslint和editorconfig问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue...
    99+
    2023-06-30
  • 如何使用eslint和editorconfig规范代码
    这篇文章主要为大家展示了“如何使用eslint和editorconfig规范代码”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用eslint和editor...
    99+
    2022-10-19
  • Vue中的ESLint配置方式
    目录说说Vue项目中添加ESLint的规则第一步:安装第二步:配置.eslintrc文件第三步:如图配置用惯了组里统一的代码风格,再看默认的vue项目代码很是别扭,记录下ESLint...
    99+
    2022-11-13
  • 详解eslint在vue中如何使用
    目录1、说明2、下载相关依赖包3、配置文件.eslintrc.js(还有其他方式配置规则)4、在vscode(版本1.44.0)配置保存时自动格式化代码5、在package.json...
    99+
    2022-11-12
  • ESLint和Jest中怎么使用esm
    本篇内容介绍了“ESLint和Jest中怎么使用esm”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!package.json 配置 type...
    99+
    2023-07-05
  • vue中使用mockjs配置和使用方式
    目录mockjs配置和使用方式需求步骤mock使用及mock无侵入的解决什么是mock?为什么要用到mock?如何使用mock?mock无侵入式配置mockjs配置和使用方式 需求 ...
    99+
    2022-11-13
  • ESLint和Jest中使用esm示例详解
    目录package.json 配置 type 选项eslint 支持 esm 配置使用 eslint.config.jsjest 中使用 esm使用 jsx 语法 esm 支持小结p...
    99+
    2023-03-03
    ESLint Jest使用esm ESLint Jest esm
  • Node.js项目中怎么安装和使用ESLint
    这期内容当中小编将会给大家带来有关Node.js项目中怎么安装和使用ESLint,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。ESLint 是一个开源 JavaScrip...
    99+
    2022-10-19
  • Vue中$forceUpdate()的使用方式
    目录$forceUpdate()的使用有两种解决方法 方法一方法二关于$forceUpdate的一些理解$forceUpdate()的使用 在Vue官方文档中指出...
    99+
    2022-11-13
  • Vue中的.vue文件的使用方式
    目录定义.vue文件引用.vue文件使用render函数什么是.vue文件,它的作用是什么需要安装vue-loader npm i vue-loader vue-template-c...
    99+
    2022-11-13
  • vue中this.$parent的使用方式
    目录vue组件this.$parent一、在实例中二、在组件中调用组件vue子组件this.$parent调用父组件方法报错TypeError:this.parent.xxx is ...
    99+
    2022-11-13
  • vue3中keep-alive和vue-router的结合使用方式
    目录前言代码一、为何要使用keep-alive?二、vue2中使用keep-alive三、vue3中使用keep-alive四、keep-alive属性“include,...
    99+
    2022-11-13
    vue3中keep-alive vue3中vue-router keep-alive和vue-router使用
  • vue中使用Axios最佳实践方式
    目录1.前言2.使用2.1安装2.2基本用例2.2.1 get请求2.2.2post请求3.配置3.1语法3.2别名4.Axios实例4.1语法4.2请求配置4.3响应的配置配置的优...
    99+
    2022-11-13
  • dataV大屏在vue中的使用方式
    目录前言一、dataV可以实现什么效果?二、使用步骤1.安装依赖2.引入3.使用三、效果前言 随着信息化的发展,大屏展示的需求越来越多,使用e-charts一个一个的做配置太麻烦,于...
    99+
    2022-11-13
  • setTimeout在vue中的正确使用方式
    目录setTimeout在vue中的正确使用遇到了1个坑问题出在我的格式上面解决vue在setTimeout内修改this失效使用箭头函数总结setTimeout在vue中的正确使用...
    99+
    2023-01-28
    vue使用setTimeout vue setTimeout setTimeout在vue使用
  • vue之moment的使用方式
    目录前言一、moment是什么?二、使用步骤(例:默认查询时间24小时之前~当前时间)三、日期格式 四、new Date() 相关前言 在日常开发中,我们常常会遇到以下几种...
    99+
    2022-11-13
  • Vue中使用 Aplayer 和 Metingjs 添加音乐插件的方式
    目录1、Aplayer和Metingjs 的文档2、使用方式3、完整API4、总结1、Aplayer和Metingjs 的文档 Aplayer官网文档 Metingjs官网文档 2、...
    99+
    2022-11-13
    Vue使用 Aplayer 和 Metingjs 添加音乐插件 Vue 添加音乐插件
  • vue中安装使用cesium方式(亲测可用)
    目录前提vue-cli-plugin-cesium安装步骤出现问题配上vue.config.js总结前提 最近想写一个自己关于cesium的demo库,发现网上用法很多,加在自己项目...
    99+
    2023-05-18
    vue安装使用cesium vue使用cesium vue cesium
  • Vue项目中使用自定义字体样式方式
    目录Vue使用自定义字体样式步骤一步骤二步骤三步骤四全局自定义字体,提高项目字体美化1、创建font文件夹2、创建index.css3、全局注册4、页面使用Vue使用自定义字体样式 ...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作