最清晰的配置! VSCode + Eslint + Prettier 语法检查+代码格式化!

前言

全文分为四部分, 分别为

prettier的使用,

eslint的使用,

prettier + eslint 的使用,

使用 vscode 的 prettier插件 来代替 prettier 格式化 , 然后再 eslint 只检测语法错误 ( 重点 ).

1.> prettier - 格式化代码

perttier 是专注于代码格式化的一个插件, 与其他不同的是, 他只有为数不多的可选项可以配置, 从而统一不同coder写的代码.

prettier 官方文档https://prettier.io/docs/en/options.html?spm=a2c4e.11153940.blogcont422690.11.5d0b5721zZ3CkZ

如下是翻译prettier控制属性的三篇博客

https://www.jianshu.com/p/4be58a69b20f

https://segmentfault.com/a/1190000012909159

https://juejin.im/post/5a7d70496fb9a063317c47f1

// 全局安装
npm install -g prettier

// 查看版本
prettier -v

// or

// 本地安装并添加依赖
npm install prettier --save-dev --save-exact 

// 创建配置文件
echo {}> .prettierrc.json

// 使用的参数有很多, 具体 --help查看
prettier --hlep

但是不推荐使用上述命令来格式化, 比较麻烦, 在文本编辑器装插件一键格式化多香, 比如文末提到的vscode

配置文件类型有很多种 js / YAML 等都可以, 之间还有优先级, 下面贴出在 package.json 添加字段的方式来配置

附 prettier 配置文件 优先级由高到低顺序如下

package.json
.prettierrc YAML 或 JSON
.prettierrc.json
.prettierrc.yaml
.prettierrc.yml
.prettierrc.js
.prettier.config.js
.prettierrc.toml

  "prettier": {
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "quoteProps": "consistent",
    "trailingComma": "all",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParents": "always",
    "semi": true,
    "requirePragma": false,
    "insertPragma": false,
    "proseWrap": "preserve",
    "htmlWhitespaceSensitivity": "ignore",
    "endOfLine": "auto"
  },

还可以针对不同文件设置不同格式化规则, 再此就不赘述了

此时, prettier 成功!

2.> eslint - js代码检查

tips:

因为我们只需要 eslint 做语法检查, 格式化交给 prettierj 就行了, 也好避免格式化的冲突!

所以, 不论是全局还是本地, 在 inint 的时候一定要选择第二项!

// 全局安装
npm install eslint -g

// 初始化, 最后会自己选择生成配置文件 ( 在此之前要确认有 package.json, 没有则 npm init 一下 )
eslint --init

// or

// 局部安装并添加开发依赖
npm install eslint --save-dev --save-exact

// 初始化, 最后会自己选择生成配置文件 ( 在此之前要确认有 package.json, 没有则 npm init 一下 )
.\node_modules\.bin\eslint --init


// 启动修复当前目录下所有文件
eslint . --fix

[eslint 官方中文文档https://cn.eslint.org/docs/user-guide/getting-started(https://cn.eslint.org/docs/user-guide/getting-started)

一篇很不错的讲解博客 https://juejin.im/post/5be237e36fb9a049fa0f3b6d

可以先参考一下讲解博客, 具体规则在自己对应官网文档进行配置

按照如上操作, 我是选择生成了加载优先等级最高的js类型, 所以就会在根目录生成 .eslintrc.js.

此时 eslint 成功!

附 eslint配置文件 优先级由高到低顺序如下

• .eslintrc.js
• .eslintrc.yaml
• .eslintrc.yml
• .eslintrc.json
• .eslintrc
• package.json

3.> eslint + prettier

讲 eslint 与 prettier 全部本地安装成功后( 注意要想有提示就必须本地安装! 除非你想没保存次文件就打一下eslint命令! ),

在 eslint的配置文件中 rule 字段里 添加

"prettier/prettier": "error"

告诉 eslint 只要是 prettier 提示的全部抛错误, 这一步为可选项!

想要保存文件同时自动语检查和格式化代码, https://juejin.im/post/5b27a326e51d45588a7dac57 可以参考下这篇博文

因为我主要是用的 vscode, 并且设置了自动保存文件, 习惯了用 Alt+Shift+F 来手动格式化, 这个方法不适合

so, 这里就略过, 具体看重点部分通过 vscode 来实现

4.> ***** vscode 集成配置 eslint+prettier

好了, 终于到了重点了!

到此时, eslint 与 prettier 都差不多明白了

这里我们来配置下 vscode,

首先分别下载安装扩展 Eslint / Prettier / Vectur( vue语法增强 )

打开全局 settings.json, 按需要添加文末JSON

其中,

prettier 格式化, 格式和上文npm 安装的略有不同, 但是属性是一样的, 注释上附了中文翻译链接, 进去按需要自己配置prettier属性

eslint 会在保存时候启动检查并提示, 如图

vectur 参考如下json配置好了之后 在 vue组件 中也会检查并提示, 如图

    // prettier 格式化配置
    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false, // 函数左括号{是否换行
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
    "prettier.printWidth": 80,
    "prettier.tabWidth": 2,
    "prettier.useTabs": false,
    "prettier.singleQuote": true,
    "prettier.jsxSingleQuote": true,
    "prettier.quoteProps": "consistent",
    "prettier.trailingComma": "all",
    "prettier.bracketSpacing": true,
    "prettier.jsxBracketSameLine": false,
    "prettier.arrowParens": "always",
    "prettier.semi": true,
    "prettier.requirePragma": false,
    "prettier.insertPragma": false,
    "prettier.proseWrap": "preserve",
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.endOfLine": "auto",
    "prettier.vueIndentScriptAndStyle": true,
    // https://prettier.io/docs/en/options.html 官方文档
    // https://juejin.im/post/5a7d70496fb9a063317c47f1 中文翻译
    // https://segmentfault.com/a/1190000012909159
    // https://www.jianshu.com/p/4be58a69b20f
    // ---------------------------------------------------
    // vue vectur 配置
    "vetur.format.options.tabSize": 2,
    "vetur.format.options.useTabs": false,
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "semi": false, //不加分号
            "singleQuote": true, //用单引号
            "tabWidth": 2,
            "printWidth": 80,
            "bracketSpacing": true, // 数组属性：后跟一个空格
        },
    },
    // ---------------------------------------------------
    // ESLint 配置代码检查
    "eslint.format.enable": false,
    "eslint.alwaysShowStatus": false,
    "eslint.quiet": false, // 忽略检查
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
    ],
    "eslint.run": "onSave",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
        ],
    },
    "editor.codeActionsOnSave": { // 启用 eslint 自动修复
        "source.fixAll.eslint": true
    }
    // ---------------------------------------------------

最后再演示一遍, 使用vscode, 创建一个项目的完整操作!

md eslint-test

cd eslint-test

npm init

npm install prettier --save-dev --save-exact 

.\node_modules\.bin\eslint --init

code .

大功告成, cheer!