初衷：之前没有固定的项目模板；每次新建项目，配置代码样式都要来回粘贴；有时粘贴后不生效；所以总结成一个文件；引入ESLint后直接使用很方便prettier代码格式化工具安装依赖#Installeslintnpminstall--save-deveslinteslint-plugin-vue#Installprettiernpminstall--save-devprettiereslint-plugin-prettier@vue/eslint-config-prettier#安装typescript支持npminstall--save-dev@vue/eslint-config-typescript@typescript-eslint/eslint-plugin@typescript-eslint/parser配置文件根目录新建.eslintrc.js文件module.exports={root:true,env:{browser:true,//requirednode:true,es2021:true},parser:'vue-eslint-parser',extends:['eslint:recommended','plugin:vue/vue3-recommended','plugin:@typescript-eslint/recommended','plugin:prettier/recommended',//eslint-config-prettier的缩写'prettier'],parserOptions:{ecmaVersion:12,解析器：'@typescript-eslint/parser',sourceType:'module',ecmaFeatures:{jsx:true}},//eslint-plugin-vue@typescript-eslint/eslint-插件eslint-plugin-prettier插件的缩写：['vue','@typescript-eslint','prettier'],rules:{'prettier/prettier':['error',{singleQuote:true,semi:false,trailingComma:'none',arrowParens:'avoid',printWidth:160}],'no-undef':'off','vue/multi-word-component-names':['error',{ignores:[]}],'vue/v-on-event-hyphenation':0//html上的事件允许驼峰格式phoneCallback},globals:{defineProps:'readonly',defineEmits:'readonly',defineExpose:'readonly',withDefaults:'readonly'}}根目录新增.eslintignore配置忽略文件.vscode.idea.localindex.html!.env-config.tscomponents.d.ts/node_modules//public/根目录新增.prettierrc.jsmodule.exports={printWidth:160,//单行输出的（最大）长度（不换行）tabWidth:2,//每个缩进级别的空格数tabs:false,//使用制表符（tab）而不是空格（space）来缩进semi:false,//是否在语句末尾打印分号singleQuote:true,//是否使用单引号quoteProps:'as-needed',//仅在需要时在对象属性周围添加引号bracketSpacing:true,//是否给对象属性添加空格htmlWhitespaceSensitivity:'ignore',//指定HTML文件的全局空白敏感度，“ignore”——空格被认为是不敏感的trailingComma:'none',//去掉后面的逗号对象的最后一个元素useTabs:false,//不使用缩进，而是使用空格jsxSingleQuote:false,//jsx不使用单引号，而是使用双引号//arrowParens:'always',//箭头函数,只有一个参数时，也需要括号rangeStart:0,//每个文件的格式化范围是文件的全部内容proseWrap:'always',//打印宽度时换行（上面有这个参数）超过endOfLine:'lf',//使用lf换行"max-lines-per-function":[2,{max:320,skipComments:true,skipBlankLines:true},]//每个函数的最大行数function}vscode保存并自动格式化安装编译器ESLint插件修改vscode配置{"editor.formatOnSave":true,//1"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"eslint.format.enable":true}保存后会自动格式化；如果没有生效；重启编译器~
