目的:自留备份,用者自取
基础配置
1 基于vscode编辑器,prettier插件需要下载
2 eslint配置项规则:
https://eslint.bootcss.com/docs/rules/
3 prettier配置项规则:
https://prettier.io/docs/en/options.html
安装插件
"devDependencies": {
"eslint": "^7.32.0",
"eslint-plugin-prettier": "^4.2.1"
}
配置文件问题:
如果项目中带有.vscode文件夹,这里面的setting.json会覆盖全局的setting.json,这样对vscode编辑器做的配置,会被覆盖掉。同样,如果不想修改vscode的全局配置,也可以在这里做个性化的配置。
.vscode -> settings.json 配置项
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// 每次保存的时候自动格式化
"editor.formatOnSave": true,
"javascript.format.enable": true,
// 让函数(名)和后面的括号之间取消空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"explorer.confirmDelete": false,
// 启用保存时自动修复eslint,默认只支持.js文件
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 保存时格式自动对齐
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 用eslint的规则检测js文件
"eslint.validate": ["javascript"]
}
prettierrc.js配置项
module.exports = {
// prettier的配置
printWidth: 80, // 每行最多多少个字符换行
tabWidth: 2, // tab缩进大小,默认为2
useTabs: false, // 使用tab缩进,默认false
semi: false, // 使用分号, 默认true
singleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号
jsxSingleQuote: false, // 单引号
trailingComma: 'all', // 行尾逗号
bracketSpacing: true, // 花括号内填充空格 { a: 23 }
bracketSameLine: false, // 最后的尾尖括号(>)放在同一行还是换行
arrowParens: 'avoid', // 箭头函数一个参数是否使用括号包裹参数
eslintIntegration: true, // #让prettier使用eslint的代码格式进行校验
}
eslintrc.js配置项
这部分可变化的空间很大,可繁可简,微信小程序开发的时候还可以加配wxml格式校验,常规vue、wx小程序、egg.js、nuxt.js语法各有不同,在配置的时候,灵活变通
vue管理后台(框架带的,配置比较详细,很多内容规定很严格)
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'vue-global-api',
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'@vue/typescript/recommended',
'plugin:prettier/recommended',
],
parser: 'vue-eslint-parser',
parserOptions: {
parser: {
js: 'espree',
ts: '@typescript-eslint/parser',
'<template>': 'espree',
},
sourceType: 'module',
ecmaFeatures: {
jsx: true,
tsx: true,
},
warnOnUnsupportedTypeScriptVersion: false,
},
rules: {
'no-undef': 'off',
'no-console': 'off',
'no-debugger': 'off',
'prettier/prettier': 'warn',
'prefer-template': 'error',
'vue/no-reserved-component-names': 'off'