工欲善其事，必先利其器。对于编写代码，还需要有一套完整的工作流程（工具和流程）。先说编辑器的选择。在踏入前端行业之前，我最喜欢的代码编辑器是sublimetext。很简单，大部分语言都可以写。比如写python。下面是我在2017年学习python的时候，发表了一篇关于sublimetext的百度经验：但是我几乎不怎么用了，换成了微软开源代码编辑器VSCode，自带git，eslint等工具，让我们的代码更优质高效。接下来是代码规范。刚开始写代码的前几年，我并不关心代码的质量。我遵循“只用它”的原则。需要迭代），我好像听到有人骂我的代码🤣，就像我骂别人的代码一样。现在我们可以使用eslint、prettier、editorConfig来规范我们的代码，这对团队来说非常重要。让我们谈谈git工作流程。现在几乎所有的管理代码都使用git版本管理工具。了解它是很有必要的，比如一些基本的推拉和冲突解决。我们不会谈论它。我们主要讲一下git在团队协作工具中的使用以及使用方法。下面我主要围绕以上三点推荐一些工具和使用方法。ESLintESLint是一款插件式的JavaScript代码静态检查工具。其核心是通过对解析代码得到的AST（AbstractSyntaxTree，抽象语法树）进行模式匹配，对代码进行分析，检查代码的质量和风格。安装并初始化eslint：//全局安装npminstall-geslint//cd到项目根目录//强制初始化package.jsonnpminit-force//初始化ESLinteslint--init使用方法写注释下面这行注释表示在当前文件中禁用console关键字/*eslintno-console:"error"*/WritefilesESLint支持eslint.js、eslintrc.yaml、eslintrc.json类型的配置文件。如eslint.js配置文件：module.exports={env:{//environmentbrowser:true,es2021:true,},extends:[//extend'eslint:recommended','plugin:@typescript-eslint/recommended',],parser:'@typescript-eslint/parser',//解析器，此解析器支持TsparserOptions:{//解析器配置选项ecmaVersion:12,//指定es版本sourceType:'module',//代码支持es6,使用module},plugins:[//plugin'@typescript-eslint',],rules:{//rules},};配置项parser-解析器parserOptions-解析器选项envandglobals-环境和全局变量rules-ruleoffor0，关闭规则warnor1，开启规则erroror2，开启规则，有错误会阻止运行文件中的代码作为最高优先级。内联配置命令行选项项目级配置IDE环境配置PrettierPrettier是一种代码格式化工具。安装使用npminstall--save-dev--save-exactprettier//格式化所有文件，npx命令在当前项目下使用prettiernpxprettier--write。配置文件Prettier支持以.prettierrc作为名称，以.yaml.yml.json命名。js后缀，当然你也可以使用package.json文件中的Prettier属性来配置。module.exports={printWidth:80,//一行的字符数，超过则换行，默认80tabWidth:2,//一个tab代表空格数，默认80useTabs:false,//是否使用tabs缩进，默认为false，表示减少withspacesnone',//是否使用尾随逗号，有3个可选值"}EditorConfigEditorConfig帮助保持多个一致的编码风格跨多个编辑器和IDE从事同一项目的开发人员，是团队的必备工具。.editorconfigfile#EditorConfigisawesome:https://EditorConfig.org#top-mostEditorConfigfile表示是最顶层的配置文件。当发现为真时，将停止搜索.editorconfig文件对于所有的js和py文件，设置文件字符集为utf-8[*.{js,py}]charset=utf-8#4spaceindentation控制py文件类型的缩进大小[*.py]indent_style=spaceindent_size=4#Tabindentation(nosizespecified)设置某文件的缩进样式为tabMakefileunspecified[Makefile]indent_style=tab#IndentationoverrideforallJSunderlibdirectory全部设置在lib目录下JS的缩进为[lib/**.js]indent_style=spaceindent_size=2#Matchestheexactfileseitherpackage.jsonor.travis.yml设置确切文件的缩进类型package.json/.travis/.yml[{package.json,.travis.yml}]indent_style=spaceindent_size=2wildcard*匹配除/**以外的任何字符串匹配一个纽约字符串？匹配任何单个字符[name]匹配名称[!name]中的任何单个字符匹配不存在的名称{s1,s2,s3}中的任何单个字符匹配给定字符串中的任何一个（以逗号分隔）{num1..num2}匹配num1和num2之间的任意整数，其中num1和num2的缩进样式可以设置为正整数或者负整数属性indent_style(tab是硬缩进，空格是软缩进）indent_size使用整数定义列数来设置缩进的宽度，如果indent_style是tab，那么这个属性默认为tab_widthtab_width使用整数来设置tab的列数缩进，默认为indent_sizeend_of_line设置换行符，值为lf，cr和crlfcharset设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不推荐使用utf-8-bomtrim_trailing_whitespace设置为true意味着它将去除换行符开头的任何空白字符。Insert_final_newline设置为true以使文件以空行结尾。Root表示它是最顶层的配置文件。当发现是真的时，它会停止寻找.editorconfig文件VSCode集成我使用VSCode为它添加魔法，添加EditorConfig,Eslint,Prettier,Git扩展。下面是Prettier的扩展。我已经在下面安装了它。您可以在扩展程序中自行搜索并安装它。配置全局工作区setting.json文件，在文件中添加如下配置：//设置所有语言保存时自动格式化"editor.formatOnSave":ture,//设置特定语言自动格式化formattedwhensaving[javascript]":{"editor.formatOnSave":true}prettierconfiguration{//设置所有语言的默认格式化程序为prettier"editor.defaultFormatter":"esbenp.prettier-vscode",//为特定语言设置默认格式化程序configureforprettier"[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"}}ESLint{//自动修复保存"editor.codeActionsOnSave":{//对于ESLint"source.fixAll.eslint":true,}}husky/lint-staged在提交到git之前，我们需要验证我们的代码是否符合规范，如果不符合，代码将不允许提交。首先，安装依赖：npminstall-Dhusky//lint-staged让husky只检查git工作区的文件，不会让你一下子出现几百个错误npminstall-Dhusky然后修改package.json添加配置："scripts":{"precommit":"eslintsrc/**/*.js"}"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,vue}":["prettier--write","eslint--cache--fix","gitadd"]}会在gitcommit之前扫描工作区文件，执行prettier脚本，修改eslint问题，然后提交到workspace。Commitizen是一个用于格式化提交消息的工具。为什么需要这个工具？以下是angular.js开源项目的提交信息。很清楚。几乎所有的大型项目和公司都在使用这个提交规范。好处：提供更多历史信息以便快速浏览可以过滤某些提交，方便过滤代码审查可以跟踪提交生成更新日志可以关联问题安装npminstall-gcommitizen安装符合AngularJS的提交指令，初始化cz-conventional-changelog适配器:commitizeniinitcz-conventional-changelog--save--save-exact然后使用gitcz命令代替gitcomit提交git说明：自定义项目提交说明以上提交说明都是英文的。如果要自定义，可以试试cz-customizable，先安装：npminstallcz-customizable--save-dev修改package.json文件："config":{"commitizen":{"path":"node_modules/cz-customizable"}}在项目根目录下创建。cz.config.js文件：'usestrict'；module.exports={types:[{value:'feature',name:'feature:anewfeature'},{value:'fix',name:'fix:FixaBug'},{value:'document',name:'document:只修改文档'},{value:'format',name:'format:空格,分号等格式修复'},{value:'Refactoring',name:'Refactoring:代码重构,attentionandfeature,repairdistinction'},{value:'performance',name:'performance:提高性能'},{value:'test',name:'test:添加测试'},{value:'tools',name:'tools:开发工具变更（构建、脚手架工具等）'},{value:'rollback',name:'rollback:codefallback'}],scopes:[{name:'module1'},{name:'module2'},{name:'module3'},{name:'module4'}],//itneedstomatchthevalueforfieldtype。例如：'fix'/*scopeOverrides:{fix:[{name:'merge'},{name:'style'},{name:'e2eTest'},{name:'unitTest'}]},*///overridethemessages,defaultsareasfollowsmessages:{type:'选择您的提交类型之一：',scope:'选择一个范围(可选):',//usedifallowCustomScopeistruecustomScope:'DenotetheSCOPEofthischange:',subject:'简短描述:\n',body:'长描述，使用"|"towrap(optional):\n',breaking:'Incompatibilitydescription(optional):\n',footer:'关联关闭的问题，例如：#31,#34(optional):\n',confirmCommit:'Confirm提交说明?'},allowCustomScopes:true,allowBreakingChanges:['Features','Repair'],//limitsubjectlengthsubjectLimit:100};然后运行，gitcz:commitizen检查提交的描述是否符合规范，不符合规范则不能提交save-dev@commitlint/config-conventional在根目录下创建commitlint.config.js并配置检查：module.exports={extends:['@commitlint/config-conventional']};然后在package.json中配置husky，我们之前安装过，直接添加配置："husky":{"hooks":{"commit-msg":"commitlint-EHUSKY_GIT_PARAMS"}}添加表情这样commit，是不是'不是更生动有趣吗？安装：npmi-ggitmoji-cli使用：你可以在这个gitmoji网站上找到更多的表情符号来丰富你的提交记录，只需在提交记录中添加类型:bug:的代码即可显示表情符号。
