网站后台管理系统进入,wordpress 博客页面至多显示,微表单网站,苏州相城区网站建设代码格式化、规范化说明
使用eslintprettier进行格式化#xff0c;vscode中需要安装插件ESLint、Prettier - Code formatter#xff0c;且格式化程序选择为后者#xff08;vue文件、js文件要分别设置#xff09;
对于eslint规则#xff0c;在格式化时不会全部自动调整prettier进行格式化vscode中需要安装插件ESLint、Prettier - Code formatter且格式化程序选择为后者vue文件、js文件要分别设置
对于eslint规则在格式化时不会全部自动调整建议的处理方式为
1.手工按提示进行处理
2.vsocode中在源码上右键---源代码操作--Fix all ESLint auto-fixable problems主要包含attribute小写、顺序、js代码块顺序等
使用此方式要注意有时会处理错误建议先格式化一次后再进行此操作
3.执行npm run lint此种方式针对所有文件但有的错误或警告有时候无法修复
4.对单行取消提示在前面加注释如// eslint-disable-next-line vue/require-default-prop如果是vscode可以通过鼠标悬浮出现修复提示后自动添加。但要注意对有的代码如html元素有多个attribute换行时前面增加 // ....这样的注释并不被认可。
5.对文件取消息提示在vue文件第一行增加在js文件第1行增加// eslint-disable
注意错误红色必须按提示进行处理不能取消提示警告黄色尽量处理实在不好处理的可按行或按文件取消提示1、将指定版本的这些依赖安装到 devDependencies 中的 npm 命令
npm install --save-dev vue/eslint-config-standard^4.0.0 eslint^8.33.0 eslint-config-airbnb-base^15.0.0 eslint-config-prettier^8.6.0 eslint-plugin-import^2.27.5 eslint-plugin-prettier^3.1.4 eslint-plugin-prettier-vue^2.1.1 eslint-plugin-vue^9.9.0 prettier^2.1.2 prettier-vue^1.1.22、项目根路径引入相关配置文件
.prettir的全部规范只有十来个详情可参考https://www.prettier.cn/docs/options.html3、scripts中引入lint
lint: eslint \src/**/*.{js,vue}\ --quiet --fix,
lint:prettier:prettier --write \src/**/*.{js,vue}\,4、使用lint
npm run lint
注意eslint会自动修复一些错误但有时会引入新的错误为了确保不影响现有功能请手动检查每个被修复的文件。5、使用prettier脚本
npm run lint:prettier
会自动使用 Prettier 格式化项目文件errc.jsonPrettier 的配置文件用于规定代码格式化规则如缩进、引号使用、分号添加等。
.prettierignore指定 Prettier 不处理的文件或目录。
.eslintrc.jsonESLint 的配置文件定义代码检查规则包括语法错误、风格问题等。
.eslintignore指定 ESLint 不检查的文件或目录。prettie.prettierrc.json代码
{printWidth: 120,singleQuote: true,useTabs: false,semi: false,tabWidth: 2,trailingComma: none,bracketSpacing: true,jsxBracketSameLine: false,arrowParens: avoid,endOfLine: lf
}.prettierignore代码
dist/*
node_modules.eslintrc.json代码
{root: true,env: {browser: true,node: true,es2021: true},extends: [airbnb-base/legacy,plugin:vue/recommended,prettier],parser: vue-eslint-parser,parserOptions: {ecmaVersion: latest,sourceType: module,ecmaFeatures: {jsx: true}},plugins: [vue,import],rules: {prefer-exponentiation-operator: off,eqeqeq: off,no-underscore-dangle: 0,vue/multi-word-component-names: 0,func-names: 0,import/no-extraneous-dependencies: [error,{devDependencies: true,optionalDependencies: true,peerDependencies: true}],no-console: [warn,{allow: [warn,error,log]}],no-debugger: 2,no-alert: 2,no-param-reassign: [error,{props: false}],lines-between-class-members: 0,dot-notation: 0,no-plusplus: [error,{allowForLoopAfterthoughts: true}]}
}.eslintignore
dist/*
vue.config.js
vite.config.js
