Eslint + Stylelint + Vscode + Vue 自动格式化

vscode 配置

插件

• eslint
• stylelint

setting.json设置

"editor.codeActionsOnSave": {
    "source.fixAll": true,
},
"eslint.validate": [
    "javascript",
    "typescript",
],
"eslint.alwaysShowStatus": true,
"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "vue",
    "sass"
]

Eslint 配置

安装

npm install eslint eslint-plugin-vue babel-eslint --save-dev

.eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  rules: {}
}

.eslintignore

build/*.js
src/assets
public
dist

Stylelint 配置

安装

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

• .stylelintrc.js 配置

module.exports = {
    extends: ["stylelint-config-standard"],
    "rules": {
        "indentation": 4
    }
}

• sass格式化

npm i -D stylelint-scss stylelint-config-standard-scss

要把 stylelint-config-standard 改成 stylelint-config-standard-scss

module.exports = {
    extends: ["stylelint-config-standard-scss"],
}

Unknown word (CssSyntaxError) 错误

• 安装 stylelint 新的相关依赖：

npm i -D stylelint-config-recommended-vue stylelint-config-standard-scss postcss-html

• 修改 .stylelintrc.js 文件的配置项

module.exports = {
    extends: [
        "stylelint-config-standard-scss",
        "stylelint-config-recommended-vue",
        "stylelint-config-recommended-vue/scss",
    ],
    customSyntax: 'postcss-html'
}