持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言:ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范（例如： = 的前后必须有一个空格），且可结合vscode做到保存自动格式化的功能。

js自动格式化

1.vscode商店中安装eslint

安装

npm install eslint -g

使用

eslint --init

示例图

• 然后根据自己需要去选择,选择后会根据你的选择生成一个配置文件我这里选择的是:.eslintrc.js

配置文件.eslintrc.js

//.eslintrc.js
module.exports = {
    env: {//预先定义的环境
        browser: true,
        commonjs: true,
        es2021: true,
        node: true
    },
    extends: [//可继承一些配置好的规则
        'standard'
    ],
    parserOptions: {
        ecmaVersion: 'latest'//emcaVersion用来指定你想要使用的 ECMAScript 版本
    },
    rules: {
        indent: ['error', 4]//4个空格缩进
    }
}

vscode配置

• 1.打开设置
• 2.工作区
• 3.设置settings.json 如下图:

settings.json中加入如下配置

{
 "editor.formatOnSave": true,//编辑器开启保存格式化
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,//eslint修复检测
  "eslint.autoFixOnSave": true//eslint保存时格式化
 },
}

效果图

$\color{red}{此时只是针对js的格式化}$

css、scss、sass自动格式化

1.vscode商店中安装styleLint

styleLint:检测css、scss、sass格式。

安装

npm install --save-dev stylelint stylelint-config-standard

配置文件.stylelintrc.json

//.stylelintrc.json
{
"extends": "stylelint-config-standard"
}

vscode配置中加入下列代码

//settings.json
"source.fixAll.stylelint": true
"stylelint.validate": ["css", "scss","sass"]

效果图

$\color{red}{此时css、scss、sass也能格式化啦的格式化}$