eslint vscode 集成 vue3+ts+git

npm install eslint --save-dev

npm init @eslint/config

 To check syntax only 仅检查语法
  To check syntax and find problems 检查语法并查找问题
> To check syntax, find problems, and enforce code style 检查语法、发现问题并强制执行代码样式

? What type of modules does your project use? ... 选择项目中的js模块是什么规范
> JavaScript modules (import/export) es6规范
  CommonJS (require/exports) 
  None of these 都不是
Does your project use TypeScript? » No / Yes 项目中是否使用ts 是否需要ts的验证选择yes
 Where does your code run? ... 选择代码的运行环境 选择浏览器
√ Browser 浏览器
 Node node'

? How would you like to define a style for your project? ...代码风格 选择流行的 
> Use a popular style guide 流行的 拿过来用或者改
  Answer questions about your style

? Which style guide do you want to follow? ... 选择一个流行的代码规范
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

What format do you want your config file to be in? 选择eslint配置文件保存格式
> JavaScript
  YAML
  JSON

Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes 根据你的选择 是否按照这些依赖

安装eslint 添加esline校验命令

"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix" 在src文件下对以js,jsx,vue,ts,tsx结尾的文件进行验证 --fix 简单的问题自动修复
  },

 验证eslint是否生效 

npm run lint

出现以下错误

 vue3 用的是vue2老版本的验证规则  只允许出现一个根节点  在node_modules文件中搜索eslint-pugin-vue找到vue的验证规则  在.eslintrc.js替换成vue3的验证规则

代码规范和ESLint-编辑器集成

 1 如何在编辑器中看到不符合规范的提示 

1-1卸载/禁用 vetur

1-2安装 eslint

-只要安装启用这个插件 就会查找项目中的eslint配置规则 并且给出提示

-如何格式化  需要手动配置 vscode 设置中找到  不同项目的eslint规则不同 这个插件是根据项目的eslint来进行校验的

 鼠标右键使用...配置格式化文档的默认值

1-3安装 Vue Language Features Volar

贴一下VSCode的settings.json

{

  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  "vetur.format.scriptInitialIndent": true,
  // eslint 检测文件类型
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true
  },
  "vetur.completion.scaffoldSnippetSources": {
    "workspace": "💼",
    "user": "🗒",
    "vetur": "✌"
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "eslint.format.enable": true,
  "[jsonc]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "editor.fontSize": 18,
  "[css]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "workbench.startupEditor": "none",
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.accessibilitySupport": "off",
  "pxremUnit": 16,
  "git.openRepositoryInParentFolders": "never",
  "eslint.codeAction.showDocumentation": {
    "enable": false
  },
  "eslint.codeActionsOnSave.rules": null,
  
  
 
}

代码规范和ESLint-配置commit钩子

安装

npx mrm@2 lint-staged

https://github.com/okonet/lint-staged

在package.json配置以下信息

"lint-staged": {
    // "*.js": "eslint --cache --fix",
    //当提交js,jsx,vue,ts,tsx这些文件时 npm run lint 进行代码检验 然后才add  校验不通过不会add
 
     "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }

 "prepare": "husky install" 很重要  确保别人拿到项目在npm install 自动安装husky  

注意：在后配的"prepare": "husky install" 需要手动执行husky  install 这个命令

husky提供本地git相关的钩子功能 比如git add  或者 commit时

"lint-staged" 拿到git代码提交之前暂存区的代码 可以进行代码验证

代码规范和ESLint-在开发和构建的时候进行验证

npm install eslint vite-plugin-eslint --save-dev

修改vite.config文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslint from 'vite-plugin-eslint'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslint({
      // 配置选项
      cache: false // 禁用缓存
    })]
})

https://github.com/gxmari007/vite-plugin-eslint

GitCommit规范

https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html

https://github.com/conventional-changelog/commitlint#getting-started

npm install --save-dev @commitlint/config-conventional @commitlint/cli

手动在src文件下创建 commitlint.config.js

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

执行命令

npx husky add .husky/commit-msg

 替换成以下

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

git提交

• feat：新功能（feature）
• fix：修补bug
• docs：文档（documentation）
• style： 格式（不影响代码运行的变动）
• refactor：重构（即不是新增功能，也不是修改bug的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动