Eslint, prettier, EditorConfig, etc. Eslint, prettier, EditorConfig, etc. Eslint, prettier, EditorConfig, etc

  • editorconfig: configuration for simple code validation across editors and ides
  • eslint: Defines code styles and constrains the configuration of code usage conditions
  • prettier: Formats and beautifies the configuration of code

EditorConfig

Many editors can automatically recognize and import EditorConfig files, such as Visual Studio or JetBrains family products, well-known idea and Web Storm and PyCharm, and some editors require plug-in support. Vs Code requires the EditorConfig for VS Code plug-in to recognize this file, and Sublime needs to be searched and installed

Editorconfig supports multiple languages, which is comfortable for programmers and reassuring for leaders

If you create multiple EditorConfig files, each of your editorConfig files will be matched to the nearest editorConfig file until you find the root directory

Root =true # config file for the root directory, The editor will look up from the current directory [*.{Java,kt,groovy, XML}] # match all files charset = UTF-8 # File encoding is UTF-8 end_of_line = CRLF # file newline Trim_trailing_whitespace = true # No space at the end of the line insert_final_newline = true # Add an empty line at the end of the file indent_style = space # Space indentation Indent_size = 2 # Indent Spaces for 2 max_line_LENGTH = 20 curly_bracket_next_line = true # Brackets-not another line spaces_around_operators = true Indent_brace_style = 1TBS spaces_around_brackets = outside indent_brace_style = K&R wildcard_import_limit = 2 [*.md] trim_trailing_whitespace = falseCopy the code

Editorconfig can only do simple validation, but if you want to be really good, you’ll need to see ESLint

Eslint

Eslint provides more robust code verification and formatting functions. For dynamic weak languages such as javascript, it is important to do upfront verification to avoid syntax errors. You have the world 😜

Installation command:

npm install -D eslint

or

yarn add -D eslint

Javascript from JsLint to Jshint and now ESLint and TSLint (stop maintenance), has become more flexible and more efficient to use, making it easier for us and the world

  • jslint: Only one set of rules, adhering to the principle of love use not, do not pull down, or the rules all use, or you do not want to use
  • jshint: You can make some changes to the rules, but it is still not flexible enough. There are no custom parsing rules and no support for new syntax
  • eslint: With that said, ESLint has it all. Eslint currently has a rich community of parsers and specifications that support vue, React, and typescript syntax

Eslint uses compilation principles to first convert source code to an AST, which allows for better extension of validation rules

General ESLint attributes have three states:

  • 'off'or0: Disable rule
  • 'warn'or1: Enables the rule to warn but not stop the application
  • 'error'or2: Enables the rule and stops the application

/* eslint-disable */ If there isa line of code that esLint does not want to validate, you can use comments such as /* eslint-disable */ to make ESLint skip that line.

  • .eslintrc.js
  • .eslintrc.yaml
  • .eslintrc.yml
  • .eslintrc.json
  • .eslintrc
  • Package. json(configured in the eslintConfig property)
module.exports = {
"no-alert": 0.// Disable alert Confirm prompt
"no-array-constructor": 2.// Disallow array constructors
"no-bitwise": 0.// Disallow bitwise operators
"no-caller": 1.// Disallow arguments. Caller or arguments.callee
"no-catch-shadow": 2.// Disallow catch clause arguments with the same name as external scope variables
"no-class-assign": 2.// Disallow class assignment
"no-cond-assign": 2.// Disallow assignment statements in conditional expressions
"no-console": 2.// Disable console
"no-const-assign": 2.// Disallow modifying variables declared by const
"no-constant-condition": 2.// Disallow constant expression if(true) if(1)
"no-continue": 0.// Disallow continue
"no-control-regex": 2.// Disallow control characters in regular expressions
"no-debugger": 2.// Disable the debugger
"no-delete-var": 2.// The delete operator cannot be used on variables declared by var
"no-div-regex": 1.// Can't use regular expressions that look like division /=foo/
"no-dupe-keys": 2.{a:1,a:1}
"no-dupe-args": 2.// Function arguments cannot be repeated
"no-duplicate-case": 2.// The case tag in the switch cannot be repeated
"no-else-return": 2.If there is a return in an if statement, it cannot be followed by an else statement
"no-empty": 2.// Block statements cannot be empty
"no-empty-character-class": 2.// The [] content in the regular expression cannot be empty
"no-empty-label": 2.// Disallow empty label
"no-eq-null": 2.// Disallow null with == or! = operator.
"no-eval": 1.// Disallow eval
"no-ex-assign": 2.// Disallow assignment of exception parameters in catch statements
"no-extend-native": 2.// Forbid extending native objects
"no-extra-bind": 2.// Disallow unnecessary function binding
"no-extra-boolean-cast": 2.// Disallow unnecessary bool conversions
"no-extra-parens": 2.// Disallow unnecessary parentheses
"no-extra-semi": 2.// Disallow extra colons
"no-fallthrough": 1.// Disable switch penetration
"no-floating-decimal": 2.// Disallow omitting 0.5 3 in floating point numbers.
"no-func-assign": 2.// Disallow duplicate function declarations
"no-implicit-coercion": 1.// Disable implicit conversions
"no-implied-eval": 2.// Disallow implicit eval
"no-inline-comments": 0.// Forbid line remarks
"no-inner-declarations": [2."functions"].Disallow declarations (variables or functions) in block statements
"no-invalid-regexp": 2.// Disallow invalid regular expressions
"no-invalid-this": 2.// Disallow invalid this only for constructors, classes, and object literals
"no-irregular-whitespace": 2.// There can be no irregular Spaces
"no-iterator": 2.// Disallow the __iterator__ attribute
"no-label-var": 2.// The label name cannot be the same as the variable name declared by var
"no-labels": 2.// Disallow label declarations
"no-lone-blocks": 2.// Disallow unnecessary nesting blocks
"no-lonely-if": 2.// Disallow only if statements in else statements
"no-loop-func": 1.// Disallow functions in loops (if no external variables are referenced and no closure is formed)
"no-mixed-requires": [0.false].// Do not mix declaration types
"no-mixed-spaces-and-tabs": [2.false].// Do not mix TAB and space
"linebreak-style": [0."windows"].// newline style
"no-multi-spaces": 1.// Do not use extra Spaces
"no-multi-str": 2.// String cannot be wrapped with \ line
"no-multiple-empty-lines": [1, {"max": 2}].// No more than 2 blank lines
"no-native-reassign": 2.// Native objects cannot be overwritten
"no-negated-in-lhs": 2.// The left side of the in operator cannot have!
"no-nested-ternary": 0.// Disallow nested ternary operations
"no-new": 1.// Disallow the use of new to construct an instance without assigning
"no-new-func": 1.// Disallow new Function
"no-new-object": 2.// Disallow new Object()
"no-new-require": 2.// Disable new require
"no-new-wrappers": 2.// Disallow creating wrapper instances with new, new String new Boolean new Number
"no-obj-calls": 2.// Cannot call built-in global objects such as Math() JSON()
"no-octal": 2.// Disallow octal digits
"no-octal-escape": 2.// Disallow octal escape sequences
"no-param-reassign": 2.// Disallow parameter reassignment
"no-path-concat": 0.// Node cannot use __dirname or __filename for path concatenation
"no-plusplus": 0.// Disallow ++, --
"no-process-env": 0.Process. env is disabled
"no-process-exit": 0.// Disallow process.exit()
"no-proto": 2.// Disallow the __proto__ attribute
"no-redeclare": 2.// Disallow variable declarations repeatedly
"no-regex-spaces": 2.// Disallow multiple Spaces /foo bar/ in regular expression literals
"no-restricted-modules": 0.// If the specified module is disabled, an error will be reported
"no-return-assign": 1.// Return statements cannot have assignment expressions
"no-script-url": 0.// Disable javascript:void(0)
"no-self-compare": 2.// Cannot compare itself
"no-sequences": 0.// Disallow the comma operator
"no-shadow": 2.// A variable in an outer scope cannot have the same name as a variable or parameter in the scope it contains
"no-shadow-restricted-names": 2.// Restricted identifiers specified in strict mode cannot be used as variable names for declaration
"no-spaced-func": 2.// Function calls cannot have Spaces between function names and ()
"no-sparse-arrays": 2.// Disable sparse array, [1, 2]
"no-sync": 0.//nodejs disallows synchronized methods
"no-ternary": 0.// Disallow the use of ternary operators
"no-trailing-spaces": 1.// No Spaces after the end of a line
"no-this-before-super": 0.This or super cannot be used before super() is called
"no-throw-literal": 2.// Disallow throwing "error";
"no-undef": 1.// There cannot be undefined variables
"no-undef-init": 2.// A variable cannot be initialized with undefined
"no-undefined": 2.// Undefined cannot be used
"no-unexpected-multiline": 2.// Avoid multi-line expressions
"no-underscore-dangle": 1.// Identifiers cannot start or end with an _
"no-unneeded-ternary": 2.// disable unnecessary nesting var isYes = answer === 1? true : false;
"no-unreachable": 2.// There can be no code that cannot be executed
"no-unused-expressions": 2.// Disallow useless expressions
"no-unused-vars": [2, {"vars": "all"."args": "after-used"}].// Can't make out unused variables or parameters
"no-use-before-define": 2.// Cannot be used before definition
"no-useless-call": 2.// Disable unnecessary call and apply
"no-void": 2.// Disable the void operator
"no-var": 0.// Disable var and use let and const instead
"no-warning-comments": [1, { "terms": ["todo"."fixme"."xxx"]."location": "start"}].// There can be no warning remarks
"no-with": 2./ / disable the with

"array-bracket-spacing": [2."never"].// Allow extra Spaces in non-empty arrays
"arrow-parens": 0.// The arrow functions are enclosed in parentheses
"arrow-spacing": 0.//=> before/after parentheses
"accessor-pairs": 0.// Use getters/setters in objects
"block-scoped-var": 0.// Block statements using var
"brace-style": [1."1tbs"].// Braces style
"callback-return": 1.// Avoid multiple callbacks
"camelcase": 2.// Enforce hump naming
"comma-dangle": [2."never"].Object literals cannot end with commas
"comma-spacing": 0.// Spaces before and after commas
"comma-style": [2."last"].// comma-style, start or end of a line break
"complexity": [0.11].// Cyclic complexity
"computed-property-spacing": [0."never"].// Are computed key names allowed
"consistent-return": 0.// Whether to omit after return
"consistent-this": [2."that"]./ / this alias
"constructor-super": 0.// Non-derived classes cannot call super. Derived classes must call super
"curly": [2."all"].// You must use {} in if(){}
"default-case": 2.// Switch statements must end with default
"dot-location": 0.// The position of the accessor, at the beginning or end of a line break
"dot-notation": [0, { "allowKeywords": true}].// Avoid unnecessary square brackets
"eol-last": 0.// The file ends with a single line break
"eqeqeq": 2.// Must use congruence
"func-names": 0.// Function expressions must have names
"func-style": [0."declaration"].// Function style, specifying that only function declarations/function expressions can be used
"generator-star-spacing": 0.// Spaces before and after the generator function *
"guard-for-in": 0.// For in loops are filtered with if statements
"handle-callback-err": 0.// Nodejs processing error
"id-length": 0.// Variable name length
"indent": [2.4].// Indent style
"init-declarations": 0.// The initial value must be assigned
"key-spacing": [0, { "beforeColon": false."afterColon": true}].// Spaces before and after colons in object literals
"lines-around-comment": 0.// Remarks before/after the line
"max-depth": [0.4].// Nested block depth
"max-len": [0.80.4].// Maximum length of a string
"max-nested-callbacks": [0.2].// Call back the nesting depth
"max-params": [0.3].// A function can take a maximum of 3 arguments
"max-statements": [0.10].// There are at most a few declarations in a function
"new-cap": 2.Function names with uppercase must be called with new, and lowercase must be called without new
"new-parens": 2.// New must be enclosed in parentheses
"newline-after-var": 2.// Whether the variable declaration should be followed by a blank line
"object-curly-spacing": [0."never"].// Whether unnecessary Spaces are allowed in braces
"object-shorthand": 0.// Enforces the object literal abbreviation syntax
"one-var": 1.// continuous declaration
"operator-assignment": [0."always"].// Assignment operator += -= what
"operator-linebreak": [2."after"].// The end of the line or the beginning of the line
"padded-blocks": 0.// Whether the first and last lines of block statements should be blank
"prefer-const": 0./ / the preferred const
"prefer-spread": 0.// Preferred expansion operation
"prefer-reflect": 0.// Reflect's preferred method
"quotes": [1."single"].// Quote type '' "" '"
"quote-props": [2."always"].// Whether double quotes are mandatory for attribute names in object literals
"radix": 2.//parseInt must specify a second argument
"id-match": 0.// Name detection
"require-yield": 0.// Generator functions must yield
"semi": [2."always"].// The statement enforces a semicolon ending
"semi-spacing": [0, {"before": false."after": true}].// Space before and after the semicolon
"sort-vars": 0.// Sort when declaring variables
"space-after-keywords": [0."always"].// Whether to leave a space after the keyword
"space-before-blocks": [0."always"].// blocks that do not start with a new line {with or without Spaces before them
"space-before-function-paren": [0."always"].// Do you want Spaces before parentheses when defining functions
"space-in-parens": [0."never"].// Do you want Spaces in the parentheses
"space-infix-ops": 0.// Do you want Spaces around infix operators
"space-return-throw-case": 2.//return throw case should not be followed by a space
"space-unary-ops": [0, { "words": true."nonwords": false}].// Do you want Spaces before or after unary operators
"spaced-comment": 0.// Comment style should have Spaces or something
"strict": 2.// Use strict mode
"use-isnan": 2.// Disallow NaN for comparison, only isNaN()
"valid-jsdoc": 0./ / jsdoc rules
"valid-typeof": 2.// Must use valid Typeof values
"vars-on-top": 2.//var must be placed at the top of scope
"wrap-iife": [2."inside"].// Execute function expressions immediately in parenthesis style
"wrap-regex": 0.// Regular expression literals are wrapped in parentheses
"yoda": [2."never"]// Disable yoda conditions
}
Copy the code

prettier

Prettier prettier is a plug-in for formatting code where EsLint does not format code completely, prettier makes code shine Prettier-code Formatter download prettier-code formatter in vs Code setting.json

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
Copy the code

So vscode knows how to beautify the code


{
  // Set mandatory single quotes
  "singleQuote": true.// Add commas to the non-trailing lines of multiline arrays es5 objects, arrays, etc
  "trailingComma": "es5".// Each line has a maximum width of 100
  "printWidth": 100.// Set the statement without a semicolon
  "semi": false.// JSX uses single quotes
  "jsxSingleQuote": true,}Copy the code

I’ll leave you there, double click 666