.babelrc
Babel is a general-purpose, multipurpose JavaScript compiler. Babel allows you to use (and create) the next generation of JavaScript, as well as the next generation of JavaScript tools.
JavaScript as a language is constantly evolving, with new standards/proposals and new features. Babel lets you use them years in advance, even before they become widely available.
Babel takes JavaScript code written in the latest standards and compiles it down to a version that can be used anywhere today. This process is called source-to-source compilation, also known as transpiling, which is a made-up portmanteau word for conversion + compilation. Hereinafter also referred to as translation).
For example, Babel can syntax the new ES2015 arrow function:
const square = n => n * n;
Copy the codeTranslated into:
const square = function square(n) {
return n * n;
};
Copy the codeBut Babel doesn’t stop there. It supports Syntax extensions like the JSX Syntax used in React, as well as Flow Syntax for static type checking.
More importantly, everything about Babel is a simple plug-in, and anyone can create their own plug-in to do anything with the full power of Babel.
Further, Babel itself is broken down into several core modules that anyone can use to create the next generation of JavaScript tools.
A lot of people are already doing this, and a very large and diverse ecosystem has sprung up around Babel. In this manual, I’ll show you how to use Babel’s built-in tools and some very useful things from the community.
The resources
babel-handbook
plugin-handbook
.browserslistrc
Configuration tools for target browsers and Node.js versions are shared between different front-end tools.
Front-end Engineering Basics –Browserslist (Based on official document translation)
.commitlintrc.json
Commit message is a daily operation of development. Writing a good log can not only help others review, but also effectively output CHANGELOG. It is actually crucial for project management, but it is often ignored in actual work. Hopefully, this article will help you focus on and standardize the writing of commit messages.
Gracefully Commit your Git Commit Message
.editorconfig
In team development, a common code format is essential. However, different developers may use different editing tools, resulting in differ code. Today I’m going to share a great way to keep different editors in the same style.
What is editorConfig?
.eslintrc.json
ESLint is a checker for ECMAScript/JavaScript syntax rules and code styles with the goal of ensuring consistency and avoiding errors.
Detailed Chinese official website
.gitattributes
On Github, Linguist automatically identifies which category your code should fall into if no language is specified, based on the amount of code in that language. If not, create a. Gitattributes file to set the attributes.
The resources
Gitattributes file
Git properties
.gitignore
The purpose of this file is to tell Git which files do not need to be added to version management.
.stylelintrc
This is a powerful modern CSS detector that allows developers to follow consistent conventions and avoid errors in style sheets.
{
"extends": "stylelint-config-standard"."plugins": [
".. /special-rule.j"]."processors": [
"stylelint-my-processor"]."rules": {
"block-no-empty": null."rule-empty-line-before": [ "always", {
"except": ["first-nested"]."ignore": ["after-comment"]]}}}Copy the codeStylelint has more than 150 rules, including catching errors, best practices, controlling the language features you can use, and enforcing code style specifications. It supports the latest CSS syntax and is flexible and configurable.
CSS code check tool stylelint
Understanding of stylelint structure and rules
.stylelintignore
To provide a global variable or an array of global variables to ignore a particular style file, use the.stylelintignore file (or point to another ignore pattern file) to ignore a particular file.
website
.flowconfig
know
Flow is a static type checker for JavaScript code. It can help you improve your work efficiency. Make your code faster, smarter, more confident, and bigger.
Flow checks the code for errors through static type annotations. These types allow you to tell Flow how you want your code to work, and Flow will make sure it works that way.
// @flow
function square(n:unmber) :number {
return n * n;
}
square("2")// Error!
Copy the codeBecause Flow understands JavaScript so well, you don’t even need to specify a type. Therefore, you only need to write a small amount of Flow code and it will infer the rest. In many cases, Flow can understand your code completely without any type.
// @flow
function square(n) {
return n * n; // Error! cannot perform aritmetic operation because string [1] is not a number
}
square("2");
Copy the codeYou can gradually introduce Flow syntax, as well as easily remove it at any time, so you can try it out in any code base as you like.
The resources
How to configure Flow
.mailmap
This is one of several Git configuration files, but before introducing it, you need to know about the Git shorlog command, which is used to view all user commits and classify them by user.
For example, run in any of your code repositories:
git shortlog -nse
Copy the codeYou might get something like the submission totals, along with your name and email address
5 Zhan San <[email protected]> 3 Zhan San <[email protected]> 1 Zhan San <[email protected]>Copy the codeWe can see that this is clearly the same person, possibly due to the submission in a different environment or device. When you use git log to view commit records, you will also encounter confusion with different accounts of the same developer.
All you need to do is create a.mailmap file in your root directory to tell Git that these accounts are the same person, and that statistics and logs use the same name and email address. The latter account is merged with the former account:
Zhan San <[email protected]> Zhansan <[email protected]> Zhan San <[email protected]> Zhan San <[email protected]>Copy the codeThis is what we want when we use Git shorlog-nes again:
9 Zhan San <[email protected]>
Copy the codeGit log –use-mailmap also works.
The resources
Git Shortlog and Mailmap
Git Chinese development manual
Presents – cli. Mailmap
.nvmrc
NVM stands for Node.js version Manage, when the team needs to maintain several projects with different versions of Node, but because the directly installed node is a unique address specified in the global variable, there is only a single version. At this point, you are ready to use NVM.
Json can also be used to further determine the Node version of the current project. For example, add the following configuration to the file:
{..."engines": {
"node": "12.2.0"}... }Copy the codeThere is no feedback when using NPM for packet management, whereas YARN can detect and block errors:
. [1/5] Validating package.json... The error [email protected]: The engine"node" is incompatible with this module. Expected version "12.2.0". Got "10.15.3".Copy the codeThe resources
Manage multiple versions of Nodes using NVM
todo…