Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Readability, maintainability, and reusability of code

readability

  1. Coding styles remain consistent: single-line comments, multi-line comments, chained code wrapping, code indentation, capitalization of constants, use of let const, arrow functions
  2. The intent of the code is clear: semantic naming, use familiar English words,
  3. Clearly annotated,

maintainability

  1. Distinguish function module, module clear, business module and tool module
  2. The directory structure
  3. Naming conventions
  4. Moderate resolution
  5. Try not to write dead code. Make it configurable

reusability

  1. Moderate encapsulation
  2. Extract common functionality
  3. To form small units independently
  4. Keep function single responsibility, flexible combination

Coding standards

Imagine a team where everyone’s coding style is different. In order to solve the maximum problems in the collaborative development process, such as: non-standard naming, difficult code understanding, low code execution efficiency. In order to shorten the time of code handover and improve the efficiency of reading and understanding, good unified coding rules are particularly important.

Usually the way we do coding rules uniformity is to include formatting tools (Prettier) and coding rule validation (ESLint) in the project

Prettier

  1. The local installation
npm install --save-dev --save-exact prettier
Copy the code
  1. Creating a Configuration File.prettierrcLet the editor know that Prettier is being used
  2. To create a.prettierignore Document forPrettier CLIAnd the editor knows which files do not need formatting.

.prettierIgnore based on.gitignore and.eslintignore (if you have one)

build/
lib/
es/
dist/ 
Copy the code
  1. Self-used.prettierrc
TabSize ": 2, "trailingComma": "es5", "printWidth": 100, "useTabs": False, "semi": false, // Add semicolons "jsxSingleQuote": false only at the beginning of lines that may cause ASI failure, // replace double quotes with single quotes "bracketSpacing" in JSX: True, // Prints Spaces between parentheses in the object text. True example: {foo: bar} "bracketSameLine": false, // place the > multi-line HTML (HTML, JSX) element at the end of the last line "proseWrap": "Never ", "arrowParens": "avoid", // omit parentheses whenever possible. Example: x => x "override ": [{"files": ". Prettierrc ", // Let Prettier format his. Prettierrc file "options": {"parser": "json" } } ] }Copy the code

ESLint

ESLint is used in almost all front-end projects, and most editors are already built in. It statically analyzes problems in our code, giving hints and quick solutions.

  1. The local installation
 npm install eslint --save-dev
Copy the code
  1. runeslint --initAfter that,.eslintrcFiles are automatically created in your folder.

3. Customize the configurationThe rules

"Off" or 0 - Close the rule "WARN" or 1 - treat the rule as a warning (does not affect the exit code) "error" or 2 - Treat the rule as an error (exit code 1)Copy the code
  1. Common rules
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'react-hooks/rules-of-hooks': OFF,
    'react/no-array-index-key': OFF,
    'react/prefer-stateless-function': OFF,
    'import/named': OFF,
    'no-param-reassign': OFF,
    'react/sort-comp': OFF,
    'no-underscore-dangle': OFF,
    'eslint-comments/disable-enable-pair': OFF,
  },
};

Copy the code

conclusion

If this article helped you, please like 👍 and follow ⭐️.

If there are any errors in this article, please correct them in the comments section 🙏🙏.

The attached:

  • # ECMAScript 6 Beginner programming style
  • ESLint
  • Prettier