前端代码规范插件 vscode eslint stylelint

前端代码规范

编辑器格式统一

• 然后项目根目录添加文件 .editorconfig，编写以下配置：

# http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

vscode 配置 eslint

然后项目根目录添加文件 .eslintrc.js，编写以下配置：

https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js

插件市场安装 eslint 插件

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置

{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}

vscode 配置 stylelint

官方网站：stylelint.io

插件项目：stylelint / vscode-stylelint

安装

yarn add -D stylelint stylelint-config-standard 
(OR)
npm   i  -D stylelint stylelint-config-standard

配置stylelint

在项目根目录建立 stylelint 配置文件 .stylelintrc.json

{
  "extends": [
    "stylelint-config-standard"
  ]
}

配置自动修复

在 settings.json 配置自动修复：

"editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
},

命令行

在 package.json 配置监测与修复命令：

"scripts": {
    "lint:style": "stylelint \"src/*.{css,scss}\"",
    "fix:style": "stylelint --fix \"src/*.{css,scss}\""
}

通用命令行选项：Options

更多命令行选项：Command Line Interface (CLI)

更多格式化规则可以在 .stylelintrc.json 文件内配置（ 完整 rules 配置选项 ）