给vscode和@/vue-cli_4.x项目初始化eslint

最新推荐文章于 2024-04-06 13:29:05 发布

一把健

最新推荐文章于 2024-04-06 13:29:05 发布

阅读量808

点赞数

文章标签：前端 eslint

本文链接：https://blog.csdn.net/qq_39446719/article/details/104705762

版权

本文介绍了如何在VSCode中配置eslint以支持代码规范检查和自动纠正，以及在Vue CLI 4.x项目中初始化并自定义eslint配置文件，通过设置实现代码风格一致性。

摘要由CSDN通过智能技术生成

前言

使用vscode，并且使用@/vue-cli初始化vue项目后，vue项目自带eslint，但若想自定义或从package.json中分离eslint配置，可以遵循如下做法。此做法适用于用webpack初始化的项目，自定义eslint用。

步骤

vscode

先配置vscode，使得vscode支持自行检查eslint规范，进行错误警或自动纠正，这里建议开启错误警告和自动纠正，强制性便于代码风格一致。

在设置中打开 settings.json 文件，并在其中添加如下配置：

{
   
	......
	 // eslint
    "eslint.options": {
   
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        "vue",
        "html",
    ],
    "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
   
        "source.fixAll.eslint": true
    },
}

eslint

在项目中配置自己的eslint

npm install -g eslint：全局安装eslint（可选）
在项目根目录使用eslint --init命令，初始化.eslintrc.*文件，
这里我在初始化时选择了vue项目，使用.eslintrc.json
在项目根目录创建commlitlint.config.js：

module.exports = {
   extends: ['@commitlint/config-conventional']};

补充.eslintrc.json中的内容，可以按照eslint官网自定义，这里给出自己本人使用的.eslintrc.json：

{
   
    // root 表示根 eslint，找到后不会再去父目录找了
    "root": true,
    // env 表示当前 eslint 使用环境
    "env": {
   
        "browser": true,
        "node": true