zoukankan      html  css  js  c++  java
  • react code help tools in VS Code —— install the ESLint extension

    原文:https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

    Linting#

    Linters analyze your source code and can warn you about potential problems before you run your application. The JavaScript language services included with VS Code has syntax error checking support by default, which you can see in action in the Problems panel (View > Problems Ctrl+Shift+M).

    Try making a small error in your React source code and you'll see a red squiggle and an error in the Problems panel.

    Linters can provide more sophisticated analysis, enforcing coding conventions and detecting anti-patterns. A popular JavaScript linter is ESLint. ESLint, when combined with the ESLint VS Code extension, provides a great in-product linting experience.

    First, install the ESLint command-line tool:

    npm install -g eslint

    Then install the ESLint extension by going to the Extensions view and typing 'eslint'.

    Once the ESLint extension is installed and VS Code reloaded, you'll want to create an ESLint configuration file, .eslintrc.js. You can create one using the extension's ESLint: Create ESLint configuration command from the Command Palette (Ctrl+Shift+P).

    The command will prompt you to answer a series of questions in the Terminal panel. Take the defaults, and it will create a .eslintrc.js file in your project root that looks something like this:

    module.exports = {
      env: {
        browser: true,
        es2020: true
      },
      extends: ['eslint:recommended', 'plugin:react/recommended'],
      parserOptions: {
        ecmaFeatures: {
          jsx: true
        },
        ecmaVersion: 11,
        sourceType: 'module'
      },
      plugins: ['react'],
      rules: {}
    };

    ESLint will now analyze open files and shows a warning in index.js about 'App' being defined but never used.

    You can modify the ESLint rules in the .eslintrc.js file.

    Let's add an error rule for extra semi-colons:

     "rules": {
            "no-extra-semi":"error"
        }

    Now when you mistakenly have multiple semicolons on a line, you'll see an error (red squiggle) in the editor and error entry in the Problems panel.

  • 相关阅读:
    day77 vue对象提供的属性功能
    day76 作业
    day76 vue框架入门
    day75 bbs项目☞后台管理+修改头像
    day74 bbs项目☞点赞与评论
    day73 bbs项目☞基本功能实现
    day72 bbs项目☞登录注册
    练习题00
    雇1个人工作7天,你有1根金条可以分成7份,只能切2刀,如何保证每天都得到1份金条
    Python正课143 —— DRF 进阶4 权限、频率、过滤、排序
  • 原文地址:https://www.cnblogs.com/panpanwelcome/p/14537695.html
Copyright © 2011-2022 走看看