Vs Code安装插件

插件名称		功能
Eslint		校验代码规范
prettier		格式化代码
vetur		vue插件

安装方法见底部说明

Vs Code setting.json

editor

{
      "editor.tabSize": 2, // 缩略
      "editor.formatOnSave": true, // 保存时，editor自动格式化
      // 如何制定 editor的规则
      // 需要安装 prettier 插件
      "editor.defaultFormatter": "esbenp.prettier-vscode" // 使用 prettier
      // javascript、vue、json、html、css、less等单独设置规则
      "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[vue]": {
            "editor.defaultFormatter": "octref.vetur"
      },
      "[html]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[css]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
}

eslint

{
	"eslint.enable": true // 开启
	"eslint.alwaysShowStatus": true // vscode  右下角展示eslint图标，见下图
  "editor.codeActionsOnSave": {
  	// 保存时，自动修复；⚠️ 优先级低于editor.formatOnSave，应该将editor.formatOnSave设置为false
  	"source.fixAll.eslint": true
  }
  "editor.options": { // https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
  }
}

prettier

{
  "editor.formatOnSave": true
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // "editor.formatOnSave": true // 这一行可以针对具体的文件类型生效
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

完整配置

{
   "workbench.colorTheme": "Atom One Dark",
      "explorer.confirmDelete": false,
      "liveServer.settings.donotShowInfoMsg": true,
      "editor.tabSize": 2,
      "editor.formatOnSave": true, // 自定
      "eslint.enable": true,
      "eslint.alwaysShowStatus": true,
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "prettier.semi": false, // 以团队规范自定
      "prettier.singleQuote": true // 以团队规范自定
  }

eslint VS prettier

eslint

• eslint提供一个插件化的javascript代码检测工具
• 根目录下 创建 .eslintrc.json / .eslintrc.js 等等
• 特点：有代码检验功能

prettier

• prettier是一款代码格式化插件
• 根目录下 创建 .prettierrc.json / .prettierrc.js 等等
• 特点：无代码检验功能 、 更强的格式化代码功能

一个项目中如何兼容这两

项目中引入了eslint配置文件，vs code配置中引入了prettier，导致eslint提示 和 格式化后的prettier 代码有冲突。图中，使用 双引号（""）以及 语句后的分号 （; ），为prettier 格式化后的结果，红线是eslint 提示错误。所以一个项目中需要兼容eslint和prettier的情况。

解决方案：

1. 安装 prettier 包

2. 更改代码：

   a. .eslintrc.json 增加使用prettier校验代码格式

   b. 增加.prettierrc以及.prettierignore

   配置详见下一小节

配置项目代码规范

第一步：安装包

// package.json增加如下插件
{
    "eslint": "^7.32.0",
    "prettier": "^2.7.1"
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^7.0.3",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "@babel/eslint-parser": "^7.12.16"
 }

增加.eslintrc.json

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "@vue/standard",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "parser": "@babel/eslint-parser",
    "ecmaFeatures": {
      "globalReturn": true
    },
    "requireConfigFile": false
  },
  "rules": {
    "dot-notation": ["off", { "allowKeywords": true }],
    "space-before-function-paren": ["off"],
    "semi": ["off"]
  }
}

增加.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

增加.eslintignore

dist/*

增加.prettierignore

dist
node_modules
coverage
CHANGELOG.en-US.md
pnpm-lock.yaml
docs/components.d.ts

其他

1. eslint引入之后，没有生效，但是文件开头就报错，如下：

此时需要在.eslint.json文件中增加：

  {
      // ...
      "parserOptions": {
        // ...
        "requireConfigFile": false
      },
  }

网上有些小伙伴可能觉得这个没作用，我觉得可能跟 eslint-plugin-vue 版本有关，我用的是7.0.3

2. 当eslint不生效时候， vs Code 如何调试

快捷键fn1 => 选择 Eslint: Restart Eslint Server => 选择 Eslint: Show Output Channel

查看控制台报错，解决eslint不生效原因

3. Vs Code 插件安装方法

4. 已有项目如何快速格式化

在完成eslint 和prettier的配置之后，package.json 中增加命令行：

package.json

{

  // ...
  scripts: {
    // ...
    "format": "prettier --write --cache .",
  }
}