Vue中使用eslint和editorconfig方式

目录

• 使用eslint和editorconfig方式
• 使用eslint的好处
• 安装eslint
• 文件配置说明
• 启动命令配置
• 自动检查语法配置
• 添加editorconfig
• vue editorconfig编辑器配置说明
• editorconfig是什么，有什么用
• editorconfig示例
• 检查是否生效
• Editorconfig 插件

使用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 版本之后都是自动安装这个插件的。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。