eslint prettier 到底怎么使用?

!提示 eslint主要用去检查代码质量, prettier用于代码格式化

一.eslint\prettier vscode插件和npm包有啥区别

• 1.vscode 插件

  与vscode集成使用, 代码出现质量问题时, 可以直观的在vscode编辑器显示 可以通过配置, 与vscode交互, 如: 代码保存时自动根据配置文件修复问题.

• 2.npm包

  elint和prettier的npm包, 其实就是一个命令行工具, 可以通过配置package.json中script脚本, 在终端执行对应的命令, 就可以检测代码质量和修复问题, 并在终端打印出日志

二.使用

• 1.vscode安装eslitn和prettier插件
• 2.初始化一个项目并安装eslint prettier eslint-config-prettier eslint-plugin-prettier npm包
• 3.创建eslint配置文件,在vscode终端执行以下命令 // 执行完会在项目根目录生产一个.eslintrc.js 或者eslintrc.jsone文件

  $ npx eslint --init

• 4.修改eslint配置文件

   {
     "env": {
       "browser": true,
       "es2021": true,
       "node": true
     },
     "extends": ["eslint:recommended", "plugin:prettier/recommended"],
     "parserOptions": {
       "ecmaVersion": 15,
       "sourceType": "module"
     },
     "rules": {
       "prettier/prettier": [
         "error",
         {
           "endOfLine": "auto", // 解决结尾换行符问题
           "singleQuote": true // 解决引号冲突问题
         }
       ]
     }
   }
  

  !提示 eslint-config-prettier解决eslint和prettier冲突的配置, eslint-plugin-prettier将prettier作为eslint的一个插件集成到eslint中使用

• 5.配置vscode文件格式化选择默认程序为prettier
• 6.修改package.json文件,执行npm run lint,即可输入lint结果

    //package.json
    { 
      "script": {
        "lint": "eslint ./src"
      }
    }