VUE -- ESLint

一、什么是ESLint

官方概念:ESLint是可组装的JavaScript和JSX检查工具。

通俗理解:是一个用来约束团队成员风格的工具,是用来检查格式的。

当通过@vue/cli脚手架工具安装项目后,默认将eslint相关的包安装并配置完成了。

 在项目中,我们将使用vue/eslint插件规定的默认规则进行检查。

如需查看规则,可通过ESLint规则查看。

二、配置eslint

 关于eslint的配置,需要放到配置文件 .eslintrc.js 中。

.eslintrc.js 这个文件中的rules节点,用于自定义rules规则

注意:修改了.eslintrc.js文件后,需要重启项目(在终端窗口中,重新npm run serve)

示例如下: 

  rules: {
    // 每句话后必须有分号
    semi: ['error', 'always']
  }

三、配置格式化插件 

以vscode的Prettier-Standard - JavaScript formatter为例。

        1、现在vscode的拓展中,安装以下插件

VUE -- ESLint_第1张图片 

        2、打开首选项--配置--settings.json文件,将以下内容复制到最后一个大括号之前

  // 缩进2空格
  "editor.tabSize": 2,
  // 保存(包括自动保存),自动格式化
  "editor.formatOnSave": true,
  // 按ctrl+s保存时,自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 编辑器窗口失去焦点时,自动保存
  "files.autoSave": "onFocusChange",
  // 配置vue默认的格式化程序(必须配置)
  "[vue]": {
    "editor.defaultFormatter": "numso.prettier-standard-vscode"
  },
  // 配置JS文件默认的格式化程序(必须配置)
  "[javascript]": {
    "editor.defaultFormatter": "numso.prettier-standard-vscode"
  },
  // 配置jsonc文件默认的格式化程序
  "[jsonc]": {
    "editor.defaultFormatter": "numso.prettier-standard-vscode"
  },
  // 配置json文件默认的格式化程序
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }

 注:若出现黄色下划线,代表配置内容重复VUE -- ESLint_第2张图片

你可能感兴趣的:(VUE基础,vue.js,前端,javascript)