微信小程序配置prettier+eslint
虽然微信开发者工具是基于vscode魔改的.但是由于版本过低,导致很多插件也用不上新版本.所以在微信开发者工具限制的版本下使用的prettier,eslint也是有版本要求.
本文主要就是记录一下需要的版本号
1.微信开发者工具安装插件
2.package.json中添加以下依赖及安装依赖
"devDependencies": {
"@babel/core": "^7.16.7",
"@babel/eslint-parser": "^7.16.5",
"eslint": "^7.28.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.1.3",
"eslint-plugin-promise": "^6.2.0",
"prettier": "^2.5.1"
}安装依赖 npm install 就不详细说明.
3.根目录下创建.eslintrc,.prettierrc
.eslintrc.js
module.exports = {
root: true,
env: {
es6: true,
browser: true,
node: true,
},
extends: ['airbnb-base', 'plugin:import/recommended', 'plugin:import/errors', 'plugin:import/warnings', 'prettier'],
plugins: ['import', 'prettier'],
parser: '@babel/eslint-parser',
parserOptions: {
requireConfigFile: false,
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
// lambda表达式
arrowFunctions: true,
// 解构赋值
destructuring: true,
// class
classes: true,
},
},
globals: {
wx: true,
App: true,
Page: true,
getCurrentPages: true,
getApp: true,
Component: true,
requirePlugin: true,
requireMiniProgram: true,
},
rules: {
'prettier/prettier': 'warn',
'no-undef': 'off',
'camelcase': ['warn', { ignoreDestructuring: true }],
'class-name-casing': 'off',
'no-console': ['warn', { allow: ['warn', 'error'] }],
'no-debugger': 'error',
'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
'no-empty-interface': 'off',
'no-use-before-define': ['error', { functions: false }],
'no-useless-constructor': 'error',
'prefer-const': 'error',
'prefer-destructuring': [
'error',
{
AssignmentExpression: {
array: false,
object: false,
},
VariableDeclarator: {
array: false,
object: true,
},
},
{
enforceForRenamedProperties: false,
},
],
'no-const-assign': 'error',
'no-new-object': 'error',
'no-prototype-builtins': 'error',
'no-array-constructor': 'error',
'array-callback-return': 'warn',
'prefer-template': 'error',
'no-useless-escape': 'error',
'wrap-iife': ['error', 'outside'],
'space-before-function-paren': [
'warn',
{
anonymous: 'always',
named: 'never',
asyncArrow: 'always',
},
],
'no-param-reassign': [
'warn',
{
props: true,
ignorePropertyModificationsFor: [
'acc', // for reduce accumulators
'accumulator', // for reduce accumulators
'e', // for e.returnvalue
'ctx', // for Koa routing
'req', // for Express requests
'request', // for Express requests
'res', // for Express responses
'response', // for Express responses
'$scope', // for Angular 1 scopes
'staticContext', // for ReactRouter context
'state', // for Vuex
],
},
],
'no-confusing-arrow': 'warn',
'no-dupe-class-members': 'error',
'no-iterator': 'warn',
'dot-notation': 'warn',
'one-var': ['warn', 'never'],
'no-multi-assign': 'error',
'no-unused-vars': [
'warn',
{
args: 'after-used',
ignoreRestSiblings: true,
argsIgnorePattern: '^_.+',
varsIgnorePattern: '^_.+',
},
],
eqeqeq: ['warn', 'always'],
'no-case-declarations': 'error',
'no-nested-ternary': 'warn',
'no-unneeded-ternary': 'warn',
'no-mixed-operators': [
'error',
{
groups: [
['%', '**'],
['%', '+'],
['%', '-'],
['%', '*'],
['%', '/'],
['&', '|', '<<', '>>', '>>>'],
['==', '!=', '===', '!=='],
['&&', '||'],
],
allowSamePrecedence: false,
},
],
'no-else-return': [
'warn',
{
allowElseIf: false,
},
],
'no-new-wrappers': 'warn',
indent: [
'warn',
2,
{
SwitchCase: 1,
VariableDeclarator: 1,
outerIIFEBody: 1,
FunctionDeclaration: {
parameters: 1,
body: 1,
},
FunctionExpression: {
parameters: 1,
body: 1,
},
CallExpression: {
arguments: 1,
},
ArrayExpression: 1,
ObjectExpression: 1,
ImportDeclaration: 1,
flatTernaryExpressions: false,
ignoreComments: false,
},
],
'linebreak-style': ['warn', 'unix'],
'import/extensions': 'off',
'import/no-unresolved': 'off',
'no-plusplus': 'off',
},
}
.prettierrc.yml
这里用的yml格式,用js格式一样可以,需要修改一下内容格式
# 一行最多 100 字符
printWidth: 120
# 使用 2 个空格缩进
tabWidth: 2
# 不使用缩进符，而使用空格
useTabs: false
# 行尾需要分号
semi: false
# 使用单引号
singleQuote: true
# 对象的 key 仅在必要时用引号
quoteProps: as-needed
# jsx 不使用单引号，而使用双引号
jsxSingleQuote: false
# 末尾需要逗号
trailingComma: all
# 大括号内的首尾需要空格
bracketSpacing: true
# jsx 标签的反尖括号需要换行
jsxBracketSameLine: false
# 箭头函数，只有一个参数的时候，不需要括号
arrowParens: always
# 每个文件格式化的范围是文件的全部内容
rangeStart: 0
# 不需要写文件开头的 @prettier
requirePragma: false
# 不需要自动在文件开头插入 @prettier
insertPragma: false
# 使用默认的折行标准
proseWrap: preserve
# 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: css
# 换行符使用 lf
endOfLine: lf
# 后缀文件名特有规则
overrides:
- files: '*.{wxss,scss}'
options:
parser: scss
- files: '*.json,.*rc'
options:
parser: json
- files: '*.{wxml,html}'
options:
parser: html
htmlWhitespaceSensitivity: strict
- files: '*.wxs'
options:
parser: babel
# 是否格式化一些文件中被嵌入的代码片段的风格，如果插件可以识别。
embeddedLanguageFormatting: auto
# 在Html，Vue，JSX中是否强制每条属性占用一行。
singleAttributePerLine: false4.微信开发工具设置prettire支持的文件格式
打开setting.json
添加或修改以下内容
"prettier.documentSelectors": [
"**/*.wxml ",
"**/*.wxss",
" **/*.wxs"
],
"[wxml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},