uniapp 配置 eslint、prettier、stylelint

uniapp 是用vue-cli创建的，所以配置eslint和vue是一样的，根据不同的vue版本来安装对应的eslint插件和配置即可。

在vscode中，保存自动校验 eslint、prettier、stylelint需要安装 对应的vscode扩展。

安装eslint插件：

npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint eslint-plugin-prettier @vue/eslint-config-prettier

介绍插件的作用

• eslint： 必备插件，代码检查工具。
• babel-eslint ：在ESLint 中使用Babel 特有的语法和转换。
• eslint-plugin-vue ：校验vue的核心插件，它可以校验template和js。
• @vue/cli-plugin-eslint：插件->它是vuecli的eslint工具，它依赖 eslint-plugin-vue，它提供了vuecli的一些配置，比如 vue.config.js的 lintOnSave选选项。它还提供了一些cli的命令 vue-cli-service lint [options] [...files]。
• eslint-plugin-prettier：插件->将 Prettier 的规则设置到 ESLint 的规则中。
• @vue/eslint-config-prettier： 配置->关闭 ESLint 中与 Prettier 中会发生冲突的规则。

在项目根目录增加.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  extends: ['plugin:vue/recommended', '@vue/prettier'],
}

安装prettier

npm i -D prettier stylelint-config-prettier

• prettier：格式化插件

配置 .prettierrc.js

// 根据自己的需求修改配置
module.exports = {
  // 单行最大长度
  printWidth: 100,
  // 设置编辑器每一个水平缩进的空格数
  tabWidth: 2,
  // 在句尾添加分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  jsxSingleQuote: true,
  // 在任何可能的多行中输入尾逗号。
  trailingComma: 'all',
  // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
  bracketSpacing: true,
  // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）
  jsxBracketSameLinte: false,
  // 为单行箭头函数的参数添加圆括号。
  alwaysParens: 'always',
  // 行结束
  endOfLine: 'auto',
  vueIndentScriptAndStyle: true, //是否缩进Vue 文件中的代码<script>和<style>标签
  htmlWhitespaceSensitivity: 'ignore', //HTML 空白敏感度
};

安装prettier

npm i -D stylelint stylelint-config-prettier stylelint-config-standard stylelint-config-standard-vue stylelint-order stylelint-scss

• stylelint：它的作用是帮助规范和检查CSS代码
• stylelint-config-prettier ：stylelint-config-prettier用于避免 stylelint 与 prettier 冲突。它会禁用所有与格式相关的 stylelint 规则，确保将其放在 extends 队列最后，这样它将覆盖其他配置。
• stylelint-config-standard ：是一个标准规则集，是stylelint官方共享的规则集成之一
• stylelint-config-standard-vue ：是一个用于Vue项目的Stylelint共享配置，它继承了stylelint-config-standard和stylelint-config-vue的规则，并对.vue文件的样式规则进行了调整
• stylelint-order ：它可以强制按照某个顺序编写 CSS 属性，例如先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性。
• stylelint-scss： 用于支持校验SCSS语法的规则。它是stylelint的一个扩展，可以规避CSS和SCSS代码中的错误并保持一致的编码风格

module.exports = {
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-standard-vue"
  ],
  "ignoreFiles": [
    "**/*.js",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.ts",
    "**/*.json",
    "**/*.md",
    "**/*.yaml"
  ],
  "overrides": [
    {
      "customSyntax": "postcss-html",
      "files": [
        "**/*.(html|vue)"
      ]
    },
  ],
  "plugins": [
    "stylelint-scss",
    "stylelint-order"
  ],
  "rules": {
    "no-invalid-double-slash-comments":null, // 忽略 // 
    "order/properties-order": [ // 配置css属性顺序,
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ]
  }
}