vue+uniapp配置Eslint+Stylelint+Pettier 统一开发规范
Posted ur home
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+uniapp配置Eslint+Stylelint+Pettier 统一开发规范相关的知识,希望对你有一定的参考价值。
第一步
>npm i eslint eslint-plugin-vue -D
>npm i babel-eslint eslint-plugin-node -D
>npm i stylelint stylelint-config-prettier stylelint-config-standard stylelint-order -D
第二步 新建.eslintrc.js 文件,极简配置即可。
// ESlint 检查配置
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
globals: { uni: true, wx: true },
env: {
browser: true,
node: true,
es6: true,
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
}
}
第三步 新建.eslintignore 文件
build/*.js
src/assets
public
dist
第四步 新建stylelint.config.js文件
module.exports = {
root: true,
plugins: ['stylelint-order'],
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global'],
},
],
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
'at-rule-no-unknown': [
true,
{
ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin'],
},
],
'no-empty-source': null,
'named-grid-areas-no-invalid': null,
'unicode-bom': 'never',
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'declaration-colon-space-after': 'always-single-line',
'declaration-colon-space-before': 'never',
// 'declaration-block-trailing-semicolon': 'always',
'rule-empty-line-before': [
'always',
{
ignore: ['after-comment', 'first-nested'],
},
],
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
'order/order': [
[
'dollar-variables',
'custom-properties',
'at-rules',
'declarations',
{
type: 'at-rule',
name: 'supports',
},
{
type: 'at-rule',
name: 'media',
},
'rules',
],
{ severity: 'warning' },
],
},
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};
第五步 新建.stylelintignore文件
/dist/*
/public/*
public/*
第六步 新建.prettier.config.js 文件
module.exports = {
// 超过最大值换行
printWidth: 100,
// 缩进字节数
tabWidth: 2,
// 缩进不使用tab,使用空格
useTabs: false,
// 句尾添加分号
semi: true,
vueIndentScriptAndStyle: true,
// 使用单引号代替双引号
singleQuote: true,
quoteProps: 'as-needed',
// 在对象,数组括号与文字之间加空格 "{ foo: bar }"
bracketSpacing: true,
// 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
trailingComma: 'es5',
// 在jsx中把'>' 是否单独放一行
jsxBracketSameLine: false,
// 在jsx中使用单引号代替双引号
jsxSingleQuote: false,
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
// 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
// 结尾是 \\n \\r \\n\\r auto
endOfLine: 'lf',
rangeStart: 0,
};
第七步 新建.prettierignore 文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
第八步 package.json scripts 中增加
"lint": "eslint --ext .js,.vue src",
"lint:eslint": "eslint --cache --max-warnings 0 \\"src/**/*.{vue,js}\\" --fix",
"lint:prettier": "prettier --write --loglevel warn \\"src/**/*.{js,json,css,less,scss,vue,html,md}\\"",
"lint:stylelint": "stylelint --cache --fix \\"**/*.{vue,less,postcss,css,scss}\\" --cache --cache-location node_modules/.cache/stylelint/"
vscode可安装插件
eslint
Prettier - Code formatter
以上是关于vue+uniapp配置Eslint+Stylelint+Pettier 统一开发规范的主要内容,如果未能解决你的问题,请参考以下文章