首页 > 编程语言> 文章详细

小程序格式化代码ESLint、Prettier、husky、lint-stage

2021-06-02 13:29:57 阅读：690 来源： 互联网

标签：prettier -- lint yarn js ESLint husky true eslint

看了大佬的一系列操作，自己做个笔记总结。
原文：https://www.jianshu.com/p/5ab7b4b48964

一些链接：ESLint、Prettier 、husky 、lint-staged、腾讯 AlloyTeam 团队出品的 eslint-config-alloy 开源规范库中文文档和网站示例

编辑器

Visual Studio Code

需要的vscode插件

ESLint：自动检测 ESLint Rule，不符合规则时，在编辑页面会有警告 ️
Prettier - Code formatter：可用于格式化

vscode设置

路径是：your_project/.vscode/settings.json

{
  "files.associations": {
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.acss": "css",
    "*.axml": "html",
    "*.wxml": "html",
    "*.swan": "html"
  },
  "files.trimTrailingWhitespace": true,
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "eslint.enable": true, // 是否开启 vscode 的 eslint
  "eslint.options": {
    // 指定 vscode 的 eslint 所处理的文件的后缀
    "extensions": [".js", ".ts", ".tsx"]
  },
  "eslint.validate": ["javascript"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "git.ignoreLimitWarning": true
}

安装依赖或者复制package内容install

yarn init
yarn add --dev babel-eslint@10.0.3
yarn add --dev eslint@6.7.1
yarn add --dev eslint-config-alloy@3.7.1
yarn add --dev eslint-config-prettier@6.10.0
yarn add --dev eslint-plugin-prettier@3.1.4
yarn add --dev prettier@2.0.5
yarn add --dev prettier-eslint-cli@5.0.0
yarn add --dev npm-run-all@4.1.5
yarn add --dev husky@4.3.0
yarn add --dev lint-staged@10.3.0

package.json内容

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "eslint": "eslint . --ext .js,.wxs,.sjs",
    "eslint:fix": "eslint --fix . --ext .js,.wxs,.sjs",
    "prettier:fix": "prettier --config .prettierrc.js --write './**/*.{js,sjs,wxs,css,wxss,acss,wxml,axml,less,scss,json}'",
    "format:all": "npm-run-all -s prettier:fix eslint:fix"
  },
  "devDependencies": {
    "babel-eslint": "10.0.3",
    "eslint": "6.7.1",
    "eslint-config-alloy": "3.7.1",
    "eslint-config-prettier": "6.10.0",
    "eslint-plugin-prettier": "3.1.4",
    "husky": "4.3.0",
    "lint-staged": "10.3.0",
    "npm-run-all": "4.1.5",
    "prettier": "2.0.5",
    "prettier-eslint-cli": "5.0.0"
  },
//下面两个在提交代码前的格式校验
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,wxs,sjs}": [
      "prettier --config .prettierrc.js --write",
      "eslint --fix --ext .js"
    ],
    "*.{json,wxml,axml,css,wxss,acss,wxml,axml,less,scss}": "prettier --config .prettierrc.js --write"
  }

格式配置文件 .eslintrc.js 和 .prettierrc.js

放置在项目根目录下。

// .eslintrc.js
module.exports = {
  root: true,
  parser: 'babel-eslint',
  env: {
    browser: true,
    es6: true,
    node: true,
    commonjs: true
  },
  extends: ['alloy'],
  plugins: ['prettier'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    __DEV__: true,
    __WECHAT__: true,
    __ALIPAY__: true,
    App: true,
    Page: true,
    Component: true,
    Behavior: true,
    wx: true,
    my: true,
    swan: true,
    getApp: true,
    getCurrentPages: true
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  rules: {
    'no-debugger': 2,
    'no-unused-vars': 1,
    'no-var': 0,
    'no-param-reassign': 0,
    'no-irregular-whitespace': 0,
    'no-useless-catch': 1,
    'max-params': ['error', 3],
    'array-callback-return': 1,
    eqeqeq: 0,
    indent: ['error', 2, { SwitchCase: 1 }]
  }
}

// .prettierrc.js
module.exports = {
    printWidth: 120,
    tabWidth: 2,
    useTabs: false,
    semi: false,
    singleQuote: true,

    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',

    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,

    // 末尾不需要逗号
    trailingComma: 'none',

    // 大括号内的首尾需要空格
    bracketSpacing: true,

    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,

    // 箭头函数，只有一个参数的时候，无需括号
    arrowParens: 'avoid',

    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,

    rangeEnd: Infinity,

    // 不需要写文件开头的 @prettier
    requirePragma: false,

    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,

    // 使用默认的折行标准
    proseWrap: 'preserve',

    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',

    // 换行符使用 lf
    endOfLine: 'lf',
    // Prettier 支持对某些文件扩展名，文件夹和特定文件进行不同的配置
    overrides: [
        {
          files: ['*.wxss', '*.acss'],
          options: {
            parser: 'css'
          }
        },
        {
          files: ['*.wxml', '*.axml'],
          options: {
            parser: 'html'
          }
        },
        {
          files: ['*.wxs', '*.sjs'],
          options: {
            parser: 'babel'
          }
        }
      ]
  }

配置忽略文件 .eslintignore 和 .prettierignore

放置在项目根目录下。

# .eslintignore

*.min.js
typings
node_modules

# .prettierignore

*.min.js
/node_modules
/dist
# OS
.DS_Store
.idea
.editorconfig
.npmrc
package-lock.json
# Ignored suffix
*.log
*.md
*.svg
*.png
*ignore
## Built-files
.cache
dist

.editorconfig 配置文件

放置在项目根目录下。它是用来抹平不同编辑器之间的差异的。

# .editorconfig
# http://editorconfig.org
# https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties


# 根目录的配置文件，编辑器会由当前目录向上查找，如果找到 `roor = true` 的文件，则不再查找
root = true

# 匹配所有的文件
[*]
# 缩进风格：space
indent_style = space
# 缩进大小 2
indent_size = 2
# 换行符 lf
end_of_line = lf
# 字符集 utf-8
charset = utf-8
# 不保留行末的空格
trim_trailing_whitespace = true
# 文件末尾添加一个空行
insert_final_newline = true
# 运算符两遍都有空格
spaces_around_operators = true

# 对所有的 js 文件生效
[*.js]
# 字符串使用单引号
quote_type = single

[*.md]
trim_trailing_whitespace = false

最后是微信小程序的打包配置

// project.config.json 仅微信小程序

"packOptions": {
    "ignore": [
      {
        "type": "regexp",
        "value": "\\.md$"
      },
      {
        "type": "folder",
        "value": "node_modules"
      }
    ]
  }

标签：prettier,--,lint,yarn,js,ESLint,husky,true,eslint
来源： https://blog.csdn.net/shengxianghui/article/details/117463206

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小程序格式化代码ESLint、Prettier、husky、lint-stage