ESLint 使用和配置

1.ESLint简述

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误,官网

2.ESLint安装

• 如果是使用 vue cli 等脚手架初始化项目时，ESLint都是默认开启的，但是他仅仅是开启检测，并没有纠错功能，自动保存代码时纠错需要手动下载如下依赖和配置.eslintrc.js较为麻烦，不是很推荐

  "eslint-plugin-html": "^6.0.3",
  "@vue/cli-plugin-eslint": "^3.3.0",
  "@vue/eslint-config-standard": "^4.0.0",
  "eslint": "5.0.0",
  "eslint-friendly-formatter": "4.0.1",
  "eslint-loader": "2.0.0",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-vue": "4.7.1",
  

• 可以通过安装VScode ESlint格式化拓展，通过配置就可以在保存代码时候自动格式化，达到代码一致性和简单纠错功能。

拓展清单

1. ESLint - 格式化核心拓展官方拓展
2. Prettier - Code formatter - 在ESLint和Vetur没有配置到格式化类型时采用此种格式化方式
3. Vetur - 提供vue语法高亮和代码提示，和一些默认vue格式化样式(写vue这个拓展基本必装，除非你写jsx，jsx不依赖特定插件)

Vscode 配置

​ 下面为我的配置文件，注释还算齐全 settings.json

{
    "workbench.colorTheme": "One Dark Pro",
    "editor.fontSize": 16,
    "liveServer.settings.donotShowInfoMsg": true,
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter-notebook"
    },
    "notebook.cellToolbarLocation": {
        "default": "right",
        "jupyter-notebook": "left"
    },
    "commentTranslate.source": "Google",
    "explorer.confirmDelete": false,
    // -------------------个人配置 代码格式化部分复制下面这部分即可-----------------------
    
        // 每次保存自动格式化,旧项目，初建项目时候没有开启ESlint检测时true，
        // 若项目已开启ESlint检测，下面此项应为False，或直接注释，不然由于优先级问题，项目ESLint将失效
        // "editor.formatOnSave": true,
        
        // 每次保存的时候将代码按eslint格式进行修复
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
        },
        // vue文件默认格式化方式vetur
        "[vue]": {
          "editor.defaultFormatter": "octref.vetur"
        },
        // vetur格式化配置
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        "vetur.format.options.tabSize": 2,
        "vetur.format.defaultFormatterOptions": {
          "js-beautify-html": {
            "wrap_attributes": "auto"
          }
        },
        "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格 只有在默认vetur的时候生效
        // js文件默认格式化方式 和vue中的js保持一致使用编辑器自带的ts格式
        "[javascript]": {
          "editor.defaultFormatter": "vscode.typescript-language-features"
        },
        // json文件默认格式化方式prettier
        "[json]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        // css文件默认格式化方式prettier
        "[css]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        // -----------------------其他自行配置-----------------------
        //关闭快速预览
        "editor.minimap.enabled": false,
        // 控制折行方式 - "on" (根据视区宽度折行)
        "editor.wordWrap": "on",
        "editor.tabSize": 2, // 换行默认以tab缩进 2个字符
        "editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。
        "editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。
        "files.associations": {
          // 文件关联语言的优先级配置
          "*.vue": "vue",
          "*.cshtml": "html",
          "*.js": "javascript",
          "*.dwt": "html"
        },
        "git.autofetch": true,
        // 默认新建文件换行符类型为LF
        "files.eol": "\n"
}

注意事项

1. "editor.formatOnSave": true, 此项开启在项目没有下载对应npm包(npm install eslint),仅用prettier格式化代码，其实这个npm包可以全局安装，这样即使项目中没有使用，ESlint格式化一样有效(npm install -g eslint)
2. 关于CRLF 和LF两种换行符报错，ESLint无法纠错，直接把vscode 默认新建文件为LF换行符就行 上面配置文件中有（"files.eol": "n"），Gitlab由于放在Linux服务器中(LF)，本地Windows(CRLF),不设置此项git commit 和 ESlint检测有时会报错。

3.VScode 其他好用拓展推荐( 前端 )

1. Bracket Pair Colorizer - 相邻括号会采用不同颜色 大 中 小 三种括号都支持，安装即用，方便查阅复杂内嵌代码(其他语言也支持)
2. Color Highlight - 将css代码中十六进制 rgb格式颜色直接编辑器显示出来
3. JavaScript (ES6) code snippets - 使编辑器支持ES6语法高亮及代码提示
4. Path Intellisense - 智能提示补全文件路径 (其他语言也支持)