vue项目eslint环境配置与vscode配置eslint

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

eslint基础环境搭建

  1. 全局安装eslint：npm install eslint -g

  2. 项目eslint初始化：eslint --init，按团队或自己的编程风格回答三道题。

  • ? How would you like to configure ESLint? Use a popular style guide

  • ? Which style guide do you want to follow? Standard

  • ? What format do you want your config file to be in? JavaScript

  1. 编辑.eslintrc.js

module.exports = {
  // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  root: true,
  // 对Babel解析器的包装使其与 ESLint 兼容。
  parser: 'babel-eslint',
  parserOptions: {
    // 代码是 ECMAScript 模块
    sourceType: 'module'
  },
  env: {
    // 预定义的全局变量，这里是浏览器环境
    browser: true,
  },
  // 扩展一个流行的风格指南，即 eslint-config-standard 
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    // 此插件用来识别.html 和 .vue文件中的js代码
    'html',
    // standard风格的依赖包
    "standard",
    // standard风格的依赖包
    "promise"
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

3.安装配置文件中依赖包：

  • eslint

  • babel-eslint

  • eslint-plugin-html

  • eslint-config-standard

  • eslint-plugin-standard

  • eslint-plugin-promise

  • eslint-plugin-node

通过 npm install (package) --save-dev 来配置到开发环境中。

并通过 npm install (package) -g 将依赖包安装到全局环境下,为什么还要安装全局环境下，原因可先行思考，稍后会在结尾解释。

截止目前eslint环境就配置好了，可执行eslint test.js来检测是否可以运行成功。

visio studio code 配置eslint

  1. 左侧菜单栏选择“扩展”，搜索“eslint”安装并重新加载，即可实现对.js文件的代码检测。

  2. 在项目中安装eslint插件：npm install eslint-plugin-html --save-dev (安装过的就不需要了)

  3. 配置vsc实现对.vue .html文件中的js代码段的检测： 顶部选项Code -> 首选项 -> 设置，搜索编辑“eslint.validate”添加 "html","vue"!

"eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      "vue"
]

  1. 可以打开项目中.vue文件，发现不规范的语法都已经被红色波浪线标记出来了。

配置控制台的eslint检测环境

如果你想在控制台查看项目中所有的warning 和 error，就请继续往下看~

  1. 保证依赖包都在全局环境目录下安装

  2. 执行 eslint --ext .js,.vue src 命令。 --ext用来指定检测的文件格式，src是检测的目录。也可以给该指令提供一个更好记的别名，编辑package.json，在script属性中新增一条。即可通过 npm run lint来检测项目中的warning 和 error了。

"scripts": {
   "lint": "eslint --ext .js,.vue src"
 },

如何给项目配置eslint到这里就讲完了，最后说下问什么要在全局环境下安装依赖包吧。

  1. 只有全局环境下安装了eslint才能执行 eslint --init 和 eslint --ext .js,.vue src 等eslint指令。

  2. 当项目执行eslint检测时，会先检测全局环境下有没有eslint，显然文章第一步就是在全局安装了，那么全局环境下的eslint引用依赖包时也只会在全局环境下查找。

  3. 如果你现在或之后不需要给项目初始化一个eslint配置，也不需要在控制台输出所有的warning和error，那么就不要全局环境下的eslint。执行 npm configs 查看全局环境下的包的安装路径，如果发现有eslint就删掉好了

以上是 vue项目eslint环境配置与vscode配置eslint 的全部内容， 来源链接： utcz.com/z/378710.html

回到顶部