Preface:

Read on to learn how to avoid and deal with these five pain points:

  1. How to switch Node versions gracefully and quickly?
  2. How to unify the use of package managers in projects?
  3. How do I get into the habit of canonical GitCommit writing?
  4. How to quickly develop similar pages/components without Copy?
  5. How can YOU write CSS that your colleagues will want to read?

Node version Manager:

Why manage Node versions?

  1. When we develop projects became more you’ll find that each project depends on version of NodeJs environment can vary widely, because of the construction of the new project we definitely will choose the latest version is more stable, so when we need to maintain history project will switch to the NodeJs version at that time.
  2. We need a Bate NodeJs environment when we want to try out some of the new features that the Bate version of NodeJs brings.

How do I switch Node versions?

  1. Refuse repeated download, repeated installation;
  2. Recommended tools: NVM-Windows, NVM.

Practical case sharing:

During the repair of a JavaScript script problem, it was found that the normally used fs.writeFile function threw a type exception, resulting in the data could not be normally output to the file. Callback parameter of fs.writefile (file, data[, options], callback) is marked as required in V7.0.0 and mandatory in V10.0.0. This failure was caused by upgrading the NodeJs version without considering the impact on the historical project, and was verified after switching the NodeJs version below V10.

Installation instructions:

  1. Since most of the team members use WIN system, the installation of WIN environment is mainly introduced here.
  2. To avoid conflicts before installation, uninstall the installed NodeJs and check the following directories.
    1. Need to empty:%ProgramFiles%\nodejs;
    2. Need to empty:%UserProfile%\.npmrc;
    3. Recommended backup:%AppData%\npm\etc\npmrcto%UserProfile%\.npmrc.
  3. downloadnvm-windowsAfter the installation, restart the terminalnvm versionView the installation result of version verification.
  4. Notice You need to open the terminal with administrator rights.

Common commands:

  1. View the installed NodeJs:nvm list [available];
  2. Install NodeJs for the specified version:nvm install <version> [arch];
  3. Uninstall the installed NodeJs:nvm uninstall <version>;
  4. Switch NodeJs version:nvm use [version] [arch].

Please refer to the following figure for more information:

The specification package manager uses:

The same problem found in collaborative development, because of the use of different package managers, the local development environment everything in the remote push of the code on the server build unexpectedly failed, but the local build on another colleague’s computer can reproduce the problem, why? When we finally looked at the contents of the node_module, we found that the file pull was different due to the different package managers we used. Here we restrict the use of the same package management through a pre-installed script.

The working principles of the preinstallation script are as follows:

Decide whether to allow or abort execution by getting a special identifier in the process that distinguishes the package manager currently in use before install is officially executed.

Package manager id gets:

  1. UserAgent scheme, the application case is which-pm-runs;
Get the identity: process.env.npM_config_USER_AgentCopy the code
Output: NPM /6.14. 5 node/v1417.1. win32 x64
yarn/1.2210. npm/? node/v1417.1. win32 x64
Copy the code
// The complete script for the UserAgent scheme

// Define the unified package manager
const allowPM = 'yarn'
const userAgent = process.env.npm_config_user_agent || ' '
if(userAgent ! = =' ') {
  const pmName = userAgent.substring(0, userAgent.indexOf('/'))
  if(pmName ! == allowPM) {console.warn(
      `\u001b[33m This repository requires using ${allowPM} as the package manager for scripts to work properly.\u001b[39m\n`
    )
    process.exit(1)}}Copy the code
  1. ExecPath solution, the application case is VUE-Next;
Identity gets: process.env.npM_execpathCopy the code
Output result:C: \... \nvm\v1417.1.\node_modules\npm\bin\npm-cli.js
C: \... \npm\node_modules\yarn\bin\yarn.jsCopy the code
const allowPM = 'yarn'
const execpath = process.env.npm_execpath || ' '
if (!new RegExp(`${allowPM}`).test(execpath)) {
  console.warn(
    `\u001b[33m This repository requires using ${allowPM} as the package manager for scripts to work properly.\u001b[39m\n`
  )
  process.exit(1)}Copy the code

Recommended solution only-allow:

Only -allow to organize open source restrictions for PNPM package manager, only-allow to use internally which-pm-runs to get the currently executing package manager and then judge interception, just adjust the contents of scripts after installing dependencies, used in Vite project.

  1. Add command:npm set-script preinstall "npx only-allow yarn".
    1. Command execution requires NPM version on V7 +;
    2. Installation is only one step.
  2. Perform when using other package managementinstallThe command will be interrupted.

GitCommit specification:

Adhering to the general specifications of GitCommit is an integral part of every good project, and there are more dependencies that need to be configured from different project requirements. Here we introduce the basics of husky7, Commitizen/CZ-CLI, and CommitLint to get you up to speed on intercepting non-commitlint messages.

Husky7 + Commitizen + Commitlint

  1. Husky7: Hooks on git execution life cycle instead of hooks that come with Git.
  2. Commitizen/CZ – CLI: Generate specification GitCommit information interactively;
  3. Commitlint: Checks whether GitCommit information is normal.

Husky7 Usage Guidelines:

Preparations:

  1. Install dependencies:npm install husky --save-dev;
  2. Add the prepare command:
    1. npm set-script prepare "husky install";
    2. Note:npm set-script xxxIn nPM7 +.
  3. Initialize husky:npm run prepareTo generate the.huskyDefault folder.

Create a Hook:

  1. Create Hook command format:husky add <file> [cmd];
  2. Git commit NPM test before git commit
    1. Modify the test command: outputhello worldText tooutput.txtFile.
    2. npx husky add .husky/pre-commit "npm test";
    3. Note: If you see only help after execution, you can run it using locally installed Husky (.\node_modules\.bin\husky), this has been fixed in NPM8.

Validation hook:

  1. Add temporary storage:git add .husky/pre-commit;
  2. Perform commit:git commit -m "Keep calm and commit".

Uninstall hooks:

  1. Uninstalling dependencies:npm uninstall husky;
  2. Unconfigure Git:git config --unset core.hooksPath.

Please refer to the following figure for more information:

Commitizen/CZ – CLI Usage Guide:

  1. Convention commit message (AngularJS) :

  1. Conventional changelog: convention-changelog, which also involves standard-version, seman-release, workflow, etc., is not described in this section.
  2. Prerequisite: Ensure that the NPM version is 5.2 or later.

Initialize and use generate Commit information:

  1. Initialize Z-Xconventional – Changelog for the project:
// If you need to force it, add parameters --force NPX commitizen init Z-conventional - Changelog --save-dev --save-exactCopy the code
  1. Add execution script:
    1. npm set-script cm "cz";
    2. It is not recommended to use commit as the key. Conflicts may lead to repeated execution. For details, see the documentation.
    3. npm set-scriptNpm7 + is required for execution.
  2. performnpm run cmAfter that, the interaction will be started to generate submission information. Before submission, please add the file to the temporary storage area.

Git commint and cz-cli using husky7:

  1. Create/husky/prepare – commit – MSG:
    1. npx husky set .husky/prepare-commit-msg 'exec < /dev/tty && git cz --hook || true'.
  2. The triggergit commitThe interactive command is displayed.

Please refer to the following figure for more information:

Commitlint User Guide:

The CLI approach is slow when we get used to using a uniform specification, so we can remove the pre-commit interceptions and use a validation-only approach to avoid occasional irregularities.

Installation steps:

  1. Install necessary dependencies:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
Copy the code
  1. Generate the configuration file:
// Note: If the encoding of the file content is not UTF-8, please modify it. In Windows, you can use Notepad to save it to UTF-8 format.echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
Copy the code
  1. Create a hook for submitting information verification:
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
Copy the code

Verify whether it can trigger:

Verify that HEAD~1 to HEAD commit is normal:

npx commitlint -- --from HEAD~1 --to HEAD --verbose
Copy the code

Actually do GitCommit:

Correct demonstration:Wrong example:

Component-level template development:

Some open source projects provide a basic project template and configure corresponding CLI tools for pull creation in order to easily get started or reduce repeated configuration when being used. In actual project development, we can also use similar ideas to help us quickly create pages, components, routes, controllers and so on.

Preparation environment:

  1. Install development dependencies:npm i plop --save-dev;
  2. Add Scripts:npm set-script new "plop";
  3. Recommended directory structure:
|-- project name
    |-- plopfile.js
    |-- plop-templates
    |   |-- sfc3
    |       |-- index.hbs
    |       |-- prompt.js
Copy the code

Note: All templates defined in Plop-templates are registered in the plopfile.js set after they are exported.

The first component template:

Vue’s single-file component splits the code into template, Script, and style, of which template and style are written in similar styles. But writing Vue3 in the script section is a little different:

  1. Create a component using the default export;
  2. Create components using the Setup dialect;
  3. Component writing uses defineComponent;
  4. Components are written using Reactive;
  5. Components are written using Ts;
  6. .

The prompt. Js script is responsible for collecting user actions and summarizing the answers:

Information to be collected:
  1. Please enter a component name:
  2. Please check the required block:
  3. Please select a type:
  4. Set scoped ?
Post-collection processing:
const actions = {
	// Add a template this time
  type: "add".// Output the directory of the component
  path: `src/components/${name}/index.vue`.// Generate a template definition for the component
  templateFile: "plop-templates/sfc3/index.hbs".// The collected data
  data: {
    name,
    // Whether to include template
    template: blocks.includes("template"),
    // Whether to include style
    style: blocks.includes("template"),
    // Whether to include script
    script: blocks.includes("script"),
    default: type === "default".setup: type === "setup".reactive: type === "reactive".scopedScoped,},}Copy the code

Index.hbs template, which is responsible for building each piece of the component:

Handlebars is a lightweight semantic template that works just fine by mastering some simple template syntax, unless you’re building more complex component templates, which you can dive into.

Text rendering:

Render directly using {{XXX}}.

Conditional judgment:

The conditional helper code block starts with {{#if XXX}} and ends with {{/if}}, rendering the middle content when template is true.

{{#if template}}
<template>
  <div>

  </div>
</template>
{{/if}}
Copy the code
Can use Plopjs built-inCase Modifiers, fast conversion variable naming style:
  • camelCase: changeFormatToThis
  • snakeCase: change_format_to_this
  • dashCase/kebabCase: change-format-to-this
  • dotCase: change.format.to.this
  • pathCase: change/format/to/this
  • properCase/pascalCase: ChangeFormatToThis
  • lowerCase: change format to this
  • sentenceCase: Change format to this,
  • constantCase: CHANGE_FORMAT_TO_THIS
  • titleCase: Change Format To This
Sample template:
{{#if template}}
<template>
  <div>

  </div>
</template>
{{/if}}

{{#if script}}
<script>
export default {
  setup () {
    return {}
  }
}
</script>
{{/if}}

{{#if style}}
<style{{#if scoped}} scoped{{/if}}>

</style>
{{/if}}
Copy the code

Sorting CSS properties:

Most of the time we care about the JavaScript code specification, install a variety of validation tools, CSS should also have a similar specification to make certain restrictions on writing, so as to avoid the repeated definition of the style overwriting situation, also reflect the thinking of writing styles. It also improves CSS readability and maintainability.

CSScombFor VSCode:

CSScomb is an encoding style formatter that focuses on CSS, Less, SCSS, or Sass.

Custom configuration:

  1. CSS sorting order: Layout → Size → interface → text → interaction;
  2. Custom configuration file: VSCode → Settings → Workspace → Settings in the upper right corner (JSON);

  1. Complete configuration, recommended for use in workspaces, configuration from JowayYoung:
// .vscode/settings.json
{
	"csscomb.formatOnSave": true.// Automatic formatting when saving code
	"csscomb.preset": {
		"always-semicolon": true.// The semicolon ends
		"block-indent": "\t".// Newline format
		"color-case": "lower".// Color format
		"color-shorthand": true.// Color abbreviations
		"element-case": "lower".// Element format
		// "eof-newline": false, // end blank line
		"leading-zero": false.// Keep the leading zero bit
		// "lines-between-rulesets": 0, // The number of lines between rules
		"quotes": "double".// In quotation marks
		"remove-empty-rulesets": true.// Discard the null rule
		"space-between-declarations": "\n".// Attribute newline
		"space-before-closing-brace": "\n".// After braces are inserted before braces
		"space-after-colon": "".// insert after colon
		"space-before-colon": "".// insert before colon
		"space-after-combinator": "".// Insert after the greater than sign
		"space-before-combinator": "".// Insert before the greater than sign
		"space-after-opening-brace": "\n".// The curly braces are inserted after
		"space-before-opening-brace": "".// Before the curly braces are inserted
		"space-after-selector-delimiter": "\n".// insert after comma
		"space-before-selector-delimiter": "".// insert before commas
		"strip-spaces": true.// remove whitespace
		"tab-size": true.// Indent size
		"unitless-zero": true.// Discard zero units
		"vendor-prefix-align": false.// Prefix indentation
		"sort-order": [
			// Layout properties
			"display"."visibility"."overflow"."overflow-x"."overflow-y".// Layout property: float
			"float"."clear".// Layout properties: position
			"position"."left"."right"."top"."bottom"."z-index".// Layout properties: list
			"list-style"."list-style-type"."list-style-position"."list-style-image".// Layout properties: table
			"table-layout"."border-collapse"."border-spacing"."caption-side"."empty-cells".// Layout properties: elastic
			"flex-flow"."flex-direction"."flex-wrap"."justify-content"."align-content"."align-items"."align-self"."flex"."flex-grow"."flex-shrink"."flex-basis"."order".// Layout attributes: multiple columns
			"columns"."column-width"."column-count"."column-gap"."column-rule"."column-rule-width"."column-rule-style"."column-rule-color"."column-span"."column-fill"."column-break-before"."column-break-after"."column-break-inside".// Layout property: grille
			"grid-columns"."grid-rows".// Size attributes
      "box-sizing"."margin"."margin-left"."margin-right"."margin-top"."margin-bottom"."padding"."padding-left"."padding-right"."padding-top"."padding-bottom"."border"."border-width"."border-style"."border-color"."border-colors"."border-left"."border-left-width"."border-left-style"."border-left-color"."border-left-colors"."border-right"."border-right-width"."border-right-style"."border-right-color"."border-right-colors"."border-top"."border-top-width"."border-top-style"."border-top-color"."border-top-colors"."border-bottom"."border-bottom-width"."border-bottom-style"."border-bottom-color"."border-bottom-colors"."border-radius"."border-top-left-radius"."border-top-right-radius"."border-bottom-left-radius"."border-bottom-right-radius"."border-image"."border-image-source"."border-image-slice"."border-image-width"."border-image-outset"."border-image-repeat"."width"."min-width"."max-width"."height"."min-height"."max-height".// Interface properties
      "appearance"."outline"."outline-width"."outline-style"."outline-color"."outline-offset"."outline-radius"."outline-radius-topleft"."outline-radius-topright"."outline-radius-bottomleft"."outline-radius-bottomright"."background"."background-color"."background-image"."background-repeat"."background-repeat-x"."background-repeat-y"."background-position"."background-position-x"."background-position-y"."background-size"."background-origin"."background-clip"."background-attachment"."bakground-composite"."background-blend-mode"."mask"."mask-mode"."mask-image"."mask-repeat"."mask-repeat-x"."mask-repeat-y"."mask-position"."mask-position-x"."mask-position-y"."mask-size"."mask-origin"."mask-clip"."mask-attachment"."mask-composite"."mask-box-image"."mask-box-image-source"."mask-box-image-width"."mask-box-image-outset"."mask-box-image-repeat"."mask-box-image-slice"."box-shadow"."box-reflect"."filter"."mix-blend-mode"."opacity"."object-fit"."clip"."clip-path"."resize"."zoom"."cursor"."pointer-events"."touch-callout"."user-modify"."user-focus"."user-input"."user-select"."user-drag".// Text attributes
      "line-height"."line-clamp"."vertical-align"."direction"."unicode-bidi"."writing-mode"."ime-mode"."text-overflow"."text-decoration"."text-decoration-line"."text-decoration-style"."text-decoration-color"."text-decoration-skip"."text-underline-position"."text-align"."text-align-last"."text-justify"."text-indent"."text-stroke"."text-stroke-width"."text-stroke-color"."text-shadow"."text-transform"."text-size-adjust"."src"."font"."font-family"."font-style"."font-stretch"."font-weight"."font-variant"."font-size"."font-size-adjust"."color".// Content attributes
      "overflow-wrap"."word-wrap"."word-break"."word-spacing"."letter-spacing"."white-space"."caret-color"."tab-size"."content"."counter-increment"."counter-reset"."quotes"."page"."page-break-before"."page-break-after"."page-break-inside".// Interactive properties
      "will-change"."perspective"."perspective-origin"."backface-visibility"."transform"."transform-origin"."transform-style"."transition"."transition-property"."transition-duration"."transition-timing-function"."transition-delay"."animation"."animation-name"."animation-duration"."animation-timing-function"."animation-delay"."animation-iteration-count"."animation-direction"."animation-play-state"."animation-fill-mode"
		] // Attribute sort}}Copy the code
  1. Added shortcut key optimization:
// .vscode/keybindings.json
[{
	"key": "ctrl+alt+c".// "cmd+alt+c"
	"command": "csscomb.execute"
}]
Copy the code

  1. For more configuration options, see the documentation: Csscomb Options.

Write in the last

Don’t give up new features because the environment can’t switch smoothly. A unified package manager will no longer be uneven. The canonical GitCommit generates a log for the summary of the phases, making regular queries much easier. Component-level template authoring can save time and standardize coding on long, iterative projects. It is also important to remember that CSS is also part of the front end, and a good structure also makes it easy to read and maintain. Of course, there will be some pain points that may have been overlooked during the development process. Post them next time, and feel free to post any front-end pain points you found in the comments section. ✔

Team to introduce

GFE trading Compliance Front End Team (GFE), which belongs to the BUSINESS line R&D Department of Trading Compliance business of GFE (Beijing), is a team with passion, creativity and adherence to technology-driven comprehensive growth. The average age of the team is 27 years old. Some of them have been working in their fields for many years, and some of them have just graduated. We actively explore in engineering, coding quality, performance monitoring, micro-service, interactive experience and other directions, pursuing the purpose of technology-driven product landing, and creating a perfect front-end technology system.

  • Vision: To be the most trusted and influential front-end team
  • Mission: Adhere to customer experience first, create more possibilities for business
  • Culture: courage to undertake, in-depth business, brainstorming, simple and open

Github：github.com/gfe-team

Team email: [email protected]

Author: GFE(High Light Technology Transaction Compliance Front End Team)

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.