nuxt + eslint + prettier 保存自动格式化（无需配置.vscode/settings.json）
nuxt + eslint + prettier 保存自动格式化（无需配置.vscode/settings.json）
- 【nuxt + eslint + prettier 保存自动格式化（无需配置.vscode/settings.json）】首先安装配置完（编码规范，代码提交规范）全家桶
husky+lint-staged+commitlint，详细配置方式请戳 全家桶husky+lint-staged+commitlint ，然后开始以下配置完成保存时自动格式化
1. 配置.editorconfig文件
# editorconfig.org root = true [*] indent_size = 4 indent_style = space end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false
2. 配置.prettierrc文件
{ "singleQuote": true, // 使用单引号 `.vscode/settings.json` 的`prettier.semi` "semi": false, // 结尾不加分号 `.vscode/settings.json` 的`prettier.semi` "printWidth": 120 // 此项为我自加以上两项为默认，表示每行最多显示的字符数，默认为80，本人觉得太短了，因此修改了一下，必须与`.vscode/settings.json` 的`prettier.printWidth`对应上 /* 更多配置请转至 https://prettier.io/docs/en/options.html */ }
3. 配置.eslintrc.js文件
module.exports = {root: true, env: { browser: true, node: true, }, parserOptions: { parser: 'babel-eslint', }, extends: [ // '@nuxtjs', 'plugin:nuxt/recommended', 'plugin:prettier/recommended', 'prettier', 'prettier/vue', ], plugins: ['prettier'], // add your custom rules here rules: { 'nuxt/no-cjs-in-config': 'off', indent: ['off', 2], // 4个空格缩进 /* 更多配置请戳 http://eslint.cn/docs/rules/ */ }, }
4.nuxt.config.js文件下build.extend(config, ctx) {}添加options.fix: true
build: { /* ** You can extend webpack config here */ extend(config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/, options: { fix: true } }) } } }
推荐阅读
- 整理大部分Eslint规则
- typeScript+koa2+eslint搭建完整nodejs开发环境（自建脚手架）
- 【eslint|【eslint prettier 】webstorm使用eslint 和prettier格式化代码
- 团队代码规范|团队代码规范 ESLint + Prettier + EditorConfig
- nuxt 路由拦截
- vue插件
- nuxt_纯前端导出文本
- 详解|详解 ESLint 规则，规范你的代码
- eslint
- 前端|vscode使用 prettier 报错（Uncaught SyntaxError: Unexpected token ＂)＂）