前端工程化之——代码规范五部曲

一、EditorConfig

EditorConfig是帮助跨各种编辑器和ide处理同一项目的多个开发人员维护一致的编码风格,文件中的设置会优先于用户/工作区设置，在开发过程中，可以通过对编辑器配置编码规则在开发过程就对代码的风格进行初步的统一。
有些编译器自带对.editorConfig这个文件的支持（可以识别这个文件中所配置的规则），有些则需要自行安装插件，VS Code需要安装插件EditorConfig for VS CODE
配置方法：在项目的根目录下创建.editorConfig文件，配置如下：

# .editorConfig文件配置：

# 当打开一个文件时，EditorConfig插件会在打开的文件目录和每个父目录中查找一个名为.editorConfig的文件。
# 如果找到了根文件路径或者找到了带有root=true的EditorConfig文件，那么对.editorConfig文件的搜索就会停止。
root = true 

# 匹配的文件
[*] 

# 缩进的类型 [space | tab] 
indent_style = space 

# indent_size应该设置为tab的大小，制表符的大小应该是tab_width(如果指定的话);否则为编辑器设置的选项卡大小。这些值不区分大小写。
# tab_width: 设置为一个整数，定义用于表示tab的列数。默认为indent_size的值，通常不需要指定。
indent_size = 2 

# 定义换行符 [lf | cr | crlf] ,这些值不区分大小写
end_of_line = lf 

# 编码格式。支持latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用uft-8-bom。 
charset = utf-8 

# 将其设置为true以删除文件中换行符之前的所有空格字符，将其设置为false以确保不删除换行符。
trim_trailing_whitespace = true 

# 文件是否以一个空白行结尾 [true | false] 
insert_final_newline = true

可以查阅官方根据需要再进行个性化配置EditConfig

二、ESLint

.eslintrc

ESLint是在ECMAScript/JavaScript代码中按照语法规则识别并且并给出报告的代码检测工具，它的作用是保证代码语法的一致性和避免错误。主要针对语法方面（比如无效变量，变量未申明使用等语法）的是无效的，这方面可以交给ESLint。
使用ESLint，必须要安装它，可以本地安装或全局安装：

// 本地安装
npm install eslint --save-dev
// 全局安装
npm install eslint --global

可以进入 ./node_modules/.bin/eslint 目录执行 --init 创建，或者自己创建一个 .eslintrc 文件,或者直接在 package.json 文件中通过 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们。

./node_modules/.bin/eslint --init

.eslintrc.js配置文件可参考如下配置如下：

module.exports = {
    // extend 属性可以说指定配置的字符串
    // 这里'plugin:vue/essential'是eslint-plugin-vue插件关于vue的配置（要install eslint-plugin-vue）
    // '@vue/prettier' 是@vue/eslint-config-prettier插件关于vue的美化工具（要install @vue/eslint-config-prettier）
    "extends": ['