前端编程规范(VSCode + Vue)

完整卸载 MAC 上面的 VSCode

第一步：退出 VSCode 应用
第二步：输入如下指令，删除 VSCode 的设置和配置

sudo rm -rf $HOME/Library/Application\ Support/Code

第三步：输入如下指令，删除 VSCode 的插件

sudo rm -rf $HOME/.vscode

第四步：从 Application 中移除 VSCode

代码编程规范

Code->首选项->设置,然后搜索settings。

安装中文语言包

安装Vetur

安装HTML Snippets

（1）解决<template></template>内部的html自动提示和补全问题
（2）解决内部的html自动提示和补全问题

在setttings.json中配置

  "files.associations": {
        "*.vue":"html"
    }

配置VSCode编辑器

在setttings.json中配置

   // 界面配置路径 Text Editor
    "editor.wordWrap": "bounded", // 设置 超过word Wrap Column设置的字符数、达到视口最小宽度，时自动换行
    "editor.wordWrapColumn": 120, // editor.wordWrap 配置为wordWrapColumn或者bounded时起作用
    "editor.insertSpaces": true, // 设置输入tab键时是否自动转为插入空格（默认ture，即自动转空格）,当editor.detectIndentation配置为 true 时，该配置项将被自动覆盖
    "editor.detectIndentation": false, // 设置是否自动检测对齐，控制打开文件时是否基于文件内容，自动检测editor.tabSize 和editor.insertSpaces
    // 界面配置路径 Text Editor -> Font
    "editor.fontSize": 14, // 设置字体大小， 默认 14
    //界面配置路径 Text Editor -> Files
    "files.autoSave": "afterDelay", //设置延迟一定的时间后自动保存文件
    "files.autoSaveDelay": 5000, // 设置自动保存文件前需要延迟的时间，单位毫秒 默认1000
    "files.enableTrash": true, // 设置删除文件、目录时是否允许删除到操作系统回收站，默认为true，即允许
    "files.encoding": "utf8", // 设置读写文件时所用编码 默认UTF-8，可针对每种语言进行设置
    "files.autoGuessEncoding": false, // 设置打开文件时，是否自动猜测字符编码，默认false，即不自动猜测，可针对每种语言进行设置
    // 界面配置路径 Text Editor -> Formatting
    "editor.formatOnPaste": true, // 设置黏贴内容时是否自动格式化，true表示自动格式化，需要配置格式化器(formatter)才可使用
    "editor.formatOnSave": true, // 设置保存文件时是否自动格式化，true表示自动格式化,需要配置格式化器(formatter)才可使用
    "editor.formatOnSaveMode": "file", // 设置保存文件时格式化整个文件还是仅被修改处。该配置项仅在 "editor.formatOnPaste" 为 true时生效
    "editor.formatOnType": true, // 设置输入完成后是否自动格式化当前行
    // 界面配置路径 Text Editor -> Minimap
    "editor.minimap.maxColumn": 120, // 设置minimap的宽度以设置可渲染的最大列数，默认120
    // 界面配置路径 Text Editor -> Suggestions
    //如果不开启将不会显示代码提示功能,Vetur、Vue 2 Snippets等提示功能将无法使用
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": false
    },

安装ESLint

在项目的根目录建立.eslintrc.js文件，键入以下代码（Vue CLI 已自动创建）

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
}

在setttings.json中配置ESLint相关

  // Eslint插件配置
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 设置保存时是否自动修复代码
  },
  // 界面配置路径 Extensiosn -> ESlint
  "eslint.alwaysShowStatus": true, // 设置状态栏是否一直显示ESlint图标项，true表示一直显示
  "eslint.format.enable": true, // 设置是否把ESlint作为一个格式化器，true表示启用

安装Prettier

 // 设置各种代码的默认格式化器
  //以下为默认配置
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // "editor.defaultFormatter": "vscode.typescript-language-features"
    // "editor.defaultFormatter": "octref.vetur"
  }

配置Vetur插件

// Vetur插件配置
  "vetur.format.enable": true, // 设置是否禁用插件格式化功能 // 默认为true，即开启
  "vetur.format.defaultFormatter.css": "prettier", // 设置css代码(<style>包含的代码块）默认格式化器
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.html": "prettier", // 设置html代码(<template>包含的代码块)默认格式化器
  "vetur.format.defaultFormatter.js": "prettier-eslint", // 设置js代码<script>包含的代码块）默认格式化器
  "vetur.format.defaultFormatter.ts": "prettier", // 设置vetur默认使用 prettier格式化代码
  "vetur.format.options.tabSize": 2, // 设置tab键占用的空格数，该配置将被所有格式化器继承
  "vetur.format.options.useTabs": false // 设置是否使用tab键缩进 默认false，即不使用，该配置将被所有格式化器继承
  //"vetur.ignoreProjectWarning": true // 控制是否忽略关于vscode项目配置错误的告警，默认为false，即不忽略

解决ESLint与Prettier之间的冲突问题

保存运行之后发现eslint与prittier之间产生冲突:
（1） prettier默认分号结尾，但是eslint结尾不需要分号
（2）prettier默认在对象的最后一个属性后面添加逗号，但是eslint规范不需要逗号
（3）prettier默认函数名与参数没有空格，eslint希望有

创建.prettierrc添加相关配置解决第一个和第二个问题。

{
  "semi": false, //设置是否在每行末尾添加分号，默认为 true
  "trailingComma": "none",
  "singleQuote": true,  // 设置格式化时，保持单引号，如果设置为true，则单引号会自动变成双引号
  "tabWidth": 2, // 设置每个tab占用多少个空格
  "printWidth": 120, // 设置每行可容纳字符数
  "useTabs": false,  // 设置是否使用tab键缩进行，默认为false，即不使用
  "bracketSpacing": true,  // 在对象，括号与文字之间加空格 true - Example: { foo: bar }   false - Example: {foo: bar}， 默认为true
  "jsxBracketSameLine": true  // 设置在jsx中，是否把'>' 单独放一行，默认为false，即单独放一行
}

对于第三个问题prittier没有提供配置方法，目前解决方案有两种:

• 方案一就是自己手动在.eslintrc.js中关闭

"space-before-function-paren":'off'

• 方案二引入插件 eslint-config-prettier + eslint-plugin-prettier。

npm install eslint-config-prettier eslint-plugin-prettier -D

然后在.eslintrc.js中增加配置:'plugin:prettier/recommended'

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    quotes: [0, 'single'], //引号类型 `` "" '' 都是合法的
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

EditorConfig for VS Code

EditorConfig 主要是用于让 vscode 支持.editorconfig文件。.editorconfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置，例如缩进样式、选项卡宽度、行尾字符以及编码等，并且它还是跨编辑器的.

在项目的根目录建立.editorconfig文件，键入以下代码（Vue CLI 已自带）

你需要和 ESLint 的配置相符

否则会出现你格式化代码以后，却不能通过你的代码校验工具的检验。可以这样说，EditorConfig 是让代码创建前保持规范， Prettier 是让代码保存后保持规范。

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

koroFileHeader

添加注释插件
Mac环境下配置:
0、安装插件 koroFileHeader，
1、在首选项-》设置-》中搜索fileheader，找到头部模板
然后根据文档配置所需要的内容，配置完成之后重启。
https://github.com/OBKoro1/koro1FileHeader/wiki/配置字段

2、在首选项-》键盘快捷方式-》中找到fileheader快捷键，可以自己修改
默认快捷键:

• 文件头部添加注释: ctr + command + i
• 函数上面添加注释: ctr + command + t

Git提交规范

具体要根据公司的具体情况来进行提交，如果没有，可以使用约定式提交。

约定式提交

提交结构如下:

<类型>[可选的作用域]: <描述>

[可选的正文]

[可选的脚注]

<类型>：比如新功能、修复、文档变更
[可选的作用域]: Home.vue
[描述]:功能简述

docs[登录授权]：修改了登录授权文档

将文档中的公司授权修改为企业授权

第188个ISSUE

Commitizen

该插件是git的规范化提交工具，帮助你填写commit信息，符合约定式提交要求

当你使用commitizen进行代码提交(git commit)的时候,commitizen会提交你在提交时填写所有必需填写的提交字段。

1、全局安装:

npm install -g commitizen@4.24

2、安装并配置cz-customizable插件

• 1、使用npm下载cz-customizable --save-dev
• 2、添加如下配置到package.json中:

....
"config" : {
	"commitizen": {
		"path": "node_modules/cz-customizable"
	}
}

3、项目根目录下创建.cz-config.js自定义提示文件:

module.exports = {
	//可选类型
	types: [
		{value:"feat",name:"feat:    新功能"},
		{value:"fix",name:"fix    修复"},
		{value:"docs",name:"docs    文档变更"},
		{value:"style",name:"style    代码格式(不影响代码运行的变动)"},
		{
			value:'refactor',
			name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
		},
		{value:'perf',name:"perf:    性能优化"},
		{value:'test',name:"test    增加测试"},
		{value:"chore",name:"chore    构建过程或者辅助工具的变动"},
		{value:"revert",name:"revert    回退"},
		{value:"build",name:"build:    打包"},
	],
	//消息步骤:
	messages: {
		type:"请选择提交类型:",
		customScope:"请输入修改范围(可选):",
		subject:'请简要描述提交(必填)',
		body:'请输入详细描述(可选):',
		footer:'请输入要关闭的issue(可选):',
		confirmCommit: '确认使用以上信息提交?(y/n/e/h)'
	},
	//跳过问题
	skipQuestions:['body','footer'],
	//subject文字长度默认是72
	subjectLimit: 72
}

4、使用git cz代替 git commit

使用husky+commitlint检查提交描述是否符合规范要求

• commitlint：用于检查提交信息。
• husky：是git hooks工具

当《提交描述信息》不符合约定式提交规范的时候，阻止当前的提交，并抛出对应的错误提示。

1、安装

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

2、在根目录创建 commitlint.config.js 文件：

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

3、安装husky：

npm install husky --save-dev

4、在控制台输入命令，生成.husky文件夹：

npx husky install

使用commit-msg钩子规范化提交信息

添加 commitlint 的 hook 到 husky中，并指令在 commit-msg 的 hooks 下执行 npx --no-install commitlint --edit “$1” 指令：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

然后测试一下提交：

发现git hooks的钩子commit-msg阻止了我们的提交，输入规范的信息后，再次尝试提交：

代码成功提交，输出log也没有任何问题。

使用pre-commit检测提交时代码规范

我们期望通过husky监测pre-commit钩子，在该钩子下执行npx eslint --ext .js,.vue src 指令来去进行相关检测:

1、执行npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"添加commit的hook(npx eslint --ext .js,.vue src会在执行到该hook时运行)
2、该操作会生成对应文件pre-commit：

3、关闭vscode的自动保存操作
4、修改一处代码，使其不符合ESLint校验规范
5、执行提交操作会发现，抛出一系列的错误，代码无法提交。

6、想要提交代码，必须处理完成所有的错误信息

lint-staged自动修复格式错误

该插件的作用: 检查本次修改更新的代码，并自动修复并且可以添加到暂存区

该插件可以让你当前的代码检查只检查本次修改更新的代码，并在错误出现的时候，自动修复并且推送。
lint-staged无需单独安装，我们生成项目时，vue-cli已经帮助我们安装过了，我们可以直接使用。
1、修改package.json配置:

"lint-staged" : {
	"src/**/*.{js,vue}":{
		"eslint --fix",
		"git add"
	}
}

2、如上配置，每次它只会在你本地commit之前，校验你提交的内容是否符合你本地配置的eslint规范，校验会出现两种结果:
（1）如果符合规范，则会提交成功
（2）如果不符合规范，它会自动执行eslint --fix尝试帮助你自动修复，如果修复成功则会帮助你把修复好的代码提交，如果修复失败，则会提示你错误，让你修复好这个错误才会允许你提交代码。

3、修改.husky/pre-commit文件

#!/bin/sh
"${dirname "$0"}/_/husky.sh"

4、再次执行提交代码

5、发现暂存区中不符合ESLint的内容，都被自动修复了。

其他插件

Vue VSCode Snippets

Vue相关的代码快捷提示工具

Bracket Pair Colorizer

安装即可，无需额外配置。
有了它，你再也不怕找不到匹配的各种括号了。他会给匹配的括号赋予同样的颜色，并且给你圈出范围来。

Live Server

为静态和动态页面生成一个具有实时重新加载功能的本地开发服务器，可以右击直接在浏览器查看

Auto Close Tag

自动闭合标签

Code Spell Checker

单词校验插件，可以避免很多错误，单词写错造成的bug。