标签：vue parser 扫描 js html eslint 引入

1、引入流程

1. 先全局安装eslint，注意版本问题，node >= 12.22.0
2. 然后npm init 项目
3. eslint --init
   1. 　　

如果只扫描html、js文件，不包括 vue 文件，如下

扫描 html 文件需要安装 eslint-plugin-html，如下：

 

node 和 eslint 版本如下：

 

配置文件内容如下：

// .eslintrc.js文件内容
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    // "parser": "@babel/eslint-parser",
    "plugins": [
        "html"
    ],
    "rules": {
        "no-console": 2
    }
}

 

此时如果只是上面的配置，可以扫描 html、js 等文件。但是扫描vue文件会直接报错，如下：

 

此时需要安装 vue-eslint-parser，如下：

 

添加配置 "parser": "vue-eslint-parser"，.eslintrc.js 文件的最终内容如下：

// .eslintrc.js 文件内容
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "parser": "vue-eslint-parser",
    "plugins": [
        "html"
    ],
    "rules": {
        "no-console": 2
    }
}

此时扫描 html 和 vue 文件都能出正确结果。

可参考：https://segmentfault.com/q/1010000018023148

 

可以往 package.json 文件添加以下命令让扫描更加方便，如下：

"scripts": {    
    "lint": "eslint --ext .js --ext .html --ext .jsx --ext .vue ./"
}

直接执行 npm run lint 即可出扫描结果。

 

1.1、vscode插件

vscode 的 eslint 插件只是一个辅助作用，让开发者在使用 vscode 时能立即查看到 eslint 扫描出的问题，不使用 eslint 插件也能通过 eslint 依赖包来扫描出代码问题。安装了 eslint 插件，但是没有配置 .eslintrc.js 文件的话，eslint 插件也不会起作用。

配置vscode插件ESlint是对开发者在编辑修改代码时就能根据校验规则进行提前规范化。

 

标签：vue,parser,扫描,js,html,eslint,引入
来源： https://www.cnblogs.com/wenxuehai/p/16391925.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。