1.1 Developing editor and Lint tool configurations

We agree that the team will adopt vscode editor for development and install at least the following plug-ins to assist development:

  • ESLint
  • Document This
  • EditorConfig for VS Code
  • Prettier – Code formatter

1.2 Adding the.editorConfig file

Because editor Settings vary from developer to developer, you should include.editorConfig in your project to uniformly configure the editor’s newline, indent storage format. Configuration Reference:

# http://editorconfig.org root = true [*] indent_style = space # indent_size = 2 End_of_line = lf # Newline use the Unix newline character \n charset = UTF-8 # character encoding UTF-8 TRIM_trailing_whitespace = true # Remove Spaces at the end of each line Insert_final_newline = true # Add a blank line at the end of each file [*.md] trim_trailing_whitespace = false #. Md files do not remove Spaces at the end of each lineCopy the code

1.3 ESLint + Prettier

1.3.1 Formatting ESlint and Prettier

The main functionality of ESLint (and some other Lint tools) includes verification of code format, and verification of code quality. Prettier, on the other hand, just checks code format (and formats code), not code quality. Code format problems usually refer to: single line code length, TAB length, Spaces, comma expressions, etc. Code quality issues are: unused variables, equal signs, global variable declarations, etc.

1.3.2 Whose formatting takes effect when Used together?

ESLint and Prettier have a few problems when they work together. ESLint and Prettier format different code for some of the rules where they intersect. The problem is that when you format code using Prettier and then use ESLint to detect it, there will be some warning caused by formatting. There are two solutions at this point:

1. After Prettier is run, format esLint –fix so that conflicting parts are written out of ESLint’s format and the rest of the warning is code quality

2. Disable the rule that conflicts with Prettier when configuring ESLint’s verification rule, and then use the Prettier rule as the verification rule. Formatting Prettier without warning when ESLint checks where Prettier is used

Why can’t YOU use ESLint before Prettier? Prettier for scenario 1, if you use Prettier later, formatted submitted code will not pass Lint the next time someone else checks out code.

For scenario 2, yes, but I’ve seen community scenarios in practice where I’ve mentioned formatting problems when esLint –fix and prettier are mixed. So it’s safe to format with perttier first and verify with eslint instead of using eslint –fix to format.

1.3.3 what is the difference between ESlint node packages and VScode plug-ins

The node package is used to report errors at compile time and will stop compiling until you fix them. Vscode plug-ins are visual plug-ins that allow you to see non-conforming code as you write it

1.3.4 Environment Configuration
Load Eslint in webPack and install the NPM plugin package
// The main two Node modules need to be installed globally so that the IDE editor can read the global environment to call these two modules
npm install eslint prettier -g --save-dev

// (important) This is for esLint and Prettier to be used together
npm install --save-dev eslint-plugin-prettier
// (important) Disable rules where Prettier conflicts with ESLint to make esLint compatible with Prettier
npm install --save-dev eslint-config-prettier
/ / webpack plug-in
npm install --save-dev eslint-loader
/ / eslint vue file
npm install --save-dev eslint-plugin-vue
// Process the Webpack alias path
npm install --save-dev eslint-plugin-import
// Introduce the Airbnb specification
npm install --save-dev eslint-config-airbnb-base
Copy the code

My project environment ([email protected][email protected]).eslintrc.js configuration file is as follows

module.exports = {
  env: {
    browser: true.es6: true.node: true,},settings: {
    'import/resolver': {
      webpack: {
        config: './build/webpack.config.dev.js',}}},extends: [
    'plugin:vue/essential'."plugin:prettier/recommended".'airbnb-base',].globals: {
    Atomics: 'readonly'.SharedArrayBuffer: 'readonly',},parserOptions: {
    ecmaVersion: 2018.//解析TS
    parser: '@typescript-eslint/parser'.sourceType: 'module',},plugins: [
    'vue'.'@typescript-eslint',].rules: {
    // "prettier/prettier":"error",
    'no-underscore-dangle': 0."max-len": ["error", { code: 160}].'no-unused-expressions': [2, {                     'allowShortCircuit': true.'allowTernary': false}]./ / to be correct
    'no-undef': 0.'no-restricted-globals': 0.'no-unused-vars': 0.'comma-dangle': 0.'object-curly-newline': 0,}}Copy the code

Eslint-loader is used to start ESLint in webpack, so if we change the webpack configuration slightly, we can start webpack-dev-server, The code is automatically formatted every time you save it.

    rules: [
      {
        test: /\.(vue|ts|js)$/.exclude: /node_modules/.enforce: 'pre'.loader: 'eslint-loader'.options: {
          fix: true.emitWarning: false,}},],Copy the code

The plugin eslint-plugin-Prettier checks your code style by calling Prettier when formatting code using prettier and comparing it with the code before formatting it. Prettier marks the place, and esLint automatically fixes the error code prettier says it would

Prettier configuration

Prettier can be configured in three ways:

  • The. Prettierrc file is created in the root directory, where. Yaml /.yml/.json/.js is used.
  • The.prettier.config.js file is created in the root directory and an object is exported.
  • Create a new prettier property in package.json. Prettierrc.js Where prettier is configured and the roles of prettier
module.exports = {
  "printWidth": 180.// The number of characters in a line. If more than 80 characters are added to the line, the default value is 80
  "tabWidth": 2.// A TAB represents several Spaces. The default is 80
  "useTabs": false.// Whether to use TAB for indentation. The default value is false, indicating that Spaces are used for indentation
  "singleQuote": true.// Whether to use single quotation marks for strings. The default is false. Use double quotation marks
  "semi": true.// Whether to use semicolons on line bits. Default is true
  "trailingComma": "es5".Tail / / whether or not to use commas, there are three optional value "< none | es5 | all >"
  "bracketSpacing": true.{foo: bar} {foo: bar}
}
Copy the code

1.4 Pits encountered

  1. While Prettier was integrated by ESlint, Webpack was constantly hot loading because Prettier was incorrectly configured. For example, Prettier was configured in the documentation
  2. Webpack will not compile successfully if there is error. Don’t worry
  3. When formatting conflicts occur between ESLint and prettier, there is a need to avoid such conflicts as nesting tritermes
  4. Currently TS officially recommends using Eslint to validate TypeScript syntax.
  5. It is suggested to start from the new project to develop specifications, if the old project embedded code specifications, large changes need to do a good job of scheduling.

1.5 summarize

No longer do we envy the guy next door who writes Golang and format it automatically when we save it, nor do we have to argue red-faced about coding for projects where prettier is used. There may be some things you don’t like at first, but don’t worry, we’re doing this for the sake of team harmony, world peace, and all the sacrifices we make are necessary. Prettier’s style has been used in large open source projects like React, Webpack, and Babel.

Reference documentation: Mainstream JavaScript code specification vs. Eslint rule cases