在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
ESLint :代码检查+代码格式化工具。
Prettier:代码格式化工具。
下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码:
一、安装
1、安装 eslint 以及 prettier
npm i eslint prettier -D
2、安装eslint-plugin-prettier插件
npm i prettier eslint-config-prettier eslint-plugin-prettier @vue/eslint-config-prettier -D
3、在 VSCode中插件安装中搜索 ESLint、Prettier - Code formatter、Vetur(因为Prettier不能格式化vue文件的template,所以使用Vetur)、这三个插件并安装。
二、配置
可以在工程根木下执行命令 eslint --init 生成.eslintrc.js文件,当然也可以手动创建该文件,一共有四个文件:
.eslintignore:忽略代码检查的配置文件
.eslintrc.js:代码检查规则的配置文件
.prettierignore:忽略代码格式化的配置文件
.prettierrc:代码格式化的配置文件
1、.eslintignore配置文件如下:
/dist /src-bex/www /src-capacitor /src-cordova /.quasar /node_modules
2. .eslintrc.js配置文件如下:
module.exports = { // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy // This option interrupts the configuration hierarchy at this file // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos) root: true, parserOptions: { parser: '@babel/eslint-parser',
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features sourceType: 'module', // Allows for the use of imports }, env: { browser: true, }, // Rules order is important, please avoid shuffling them extends: [ // Base ESLint recommended rules // 'eslint:recommended', // Uncomment any of the lines below to choose desired strictness, // but leave only one uncommented! // See https://eslint.vuejs.org/rules/#available-rules 'plugin:vue/essential', // Priority A: Essential (Error Prevention) // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability) // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) // https://github.com/prettier/eslint-config-prettier#installation // usage with Prettier, provided by 'eslint-config-prettier'. 'plugin:prettier/recommended', // "prettier", // "prettier/vue" ], plugins: [ // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file // required to lint *.vue files 'vue', 'prettier', // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674 // Prettier has not been included as plugin to avoid performance impact // add it as an extension for your IDE ], globals: { ga: true, // Google Analytics cordova: true, __statics: true, process: true, Capacitor: true, chrome: true, }, // add your custom rules here rules: { 'prefer-promise-reject-errors': 'off', 'prettier/prettier': 'error', // allow debugger during development only 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', }, };
3. .prettierignore配置文件如下:
**/*.svg node_modules/ package.json lib/ es/ # dist/ _site/ coverage/ CNAME LICENlock netlifSE yarn.y.toml yarn-error.log *.sh *.snap .gitignore .npmignore .prettierignore .DS_Store .editorconfig .eslintignore **/*.yml components/style/color/*.less **/assets .gitattributes .stylelintrc .vcmrc .logo .npmrc.template .huskyrc
4. .prettierrc配置文件如下:
{ "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "quoteProps": "as-needed", "jsxSingleQuote": false, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "always", "requirePragma": false, "insertPragma": false, "proseWrap": "never", "htmlWhitespaceSensitivity": "css", "vueIndentScriptAndStyle": false, "endOfLine": "auto", "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" } } ] }
5、修改VSCode配置,文件->首选项->设置,
在设置页,点击右上角第一个按钮,打开setting.json,修改内容为:
{ //保存自动格式化 "editor.formatOnSave": true, //.vue文件template格式化支持,并使用js-beautify-html插件 "vetur.format.defaultFormatter.html": "js-beautify-html", // js-beautify-html格式化配置,属性强制换行 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, //保存时eslint自动修复错误 "source.fixAll.eslint": true, //配置 ESLint 检查的文件类型 "eslint.validate": ["javascript", "javascriptreact", "html", "vue"], "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { // "editor.defaultFormatter": "vscode.typescript-language-features" "editor.defaultFormatter": "esbenp.prettier-vscode" } }
vue2使用脚手架配置prettier报错:‘prettier/prettier‘: context.getPhysicalFilename is not a function
一,原因
出现这个错误大概率是由于相关联的依赖之间的版本不互相兼容导致的。比如我用的是 vue 官方默认的 vue2 脚手架创建的项目,在此基础上我又在项目中自己配置了 .eslintrc.js 和 .prettierrc,自己又装了一些格式化插件,如 @vue/eslint-config-prettie、prettier,结果项目就运行不起来了。包括我之后在安装 sass和sass-loader运行不起来也是因为版本问题导致。
二,解决办法
# 移除以下依赖,项目中不存在的就不用移除
npm rm @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint eslint-plugin-prettier eslint-plugin-vue prettier
然后安装指定版本的依赖后重新打开vscode:
# 这些依赖都是开发环境才需要用到,加上 -D
npm i -D @vue/cli-plugin-babel@4.4.6 @vue/cli-plugin-eslint@4.4.6 @vue/eslint-config-prettier@7.0.0 eslint eslint-plugin-prettier eslint-plugin-vue prettier
vue-element-admin 在git commit时出现大量:error Replace `⏎` with `·` prettier/prettier 。自动把代码修改导致校验出错
原因是使用了husky:
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
原来经过prettier校验是没问题的,但commit时会用eslint做一次校验自动把代码改了,导致prettier的校验失败,两者是冲突的。修改.eslintrc.js如下:
extends: [ // Base ESLint recommended rules // 'eslint:recommended', // Uncomment any of the lines below to choose desired strictness, // but leave only one uncommented! // See https://eslint.vuejs.org/rules/#available-rules '@vue/prettier', 'plugin:vue/essential', // Priority A: Essential (Error Prevention) // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability) // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) // https://github.com/prettier/eslint-config-prettier#installation // usage with Prettier, provided by 'eslint-config-prettier'. 'plugin:prettier/recommended', // "prettier", 'plugin:vue/recommended', // 'eslint:recommended', // "prettier/vue" ],
不知为何commit还是会eslint报错,但不会自动改代码了。只好先把这个prettier/prettier规则先关了,
rules: {
'prefer-promise-reject-errors': 'off',
'prettier/prettier': 'off',
'vue/multi-word-component-names': 'off',
'vue/no-mutating-props': 'off',
'no-useless-escape': 'off',
'no-undef': 0, //使用未声名的变量
'no-unused-vars': 0, //声名未使用
//关闭eslint检查文件名是否为驼峰命名
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
};
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人