关于前端:Vue3项目配置-eslint-prettier

初衷: 在没有固定的我的项目模版之前；每次新建我的项目之后配置代码格调都须要来回粘贴；并且有时候粘贴了也不失效；故总结成文档；不便之后间接应用

ESLint 是 JavaScript 和 JSX 查看工具
prettier 代码格式化工具

# 装置 eslint
npm install --save-dev eslint eslint-plugin-vue

#装置 prettier
npm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier

#装置 typescript 反对
npm install --save-dev @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

根目录新建 .eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    browser: true,
    // 必填
    node: 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,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {jsx: true}
  },
  // eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier 的缩写
  plugins: ['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
.local
index.html
!.env-config.ts
components.d.ts
/node_modules/
/public/

根目录新建 .prettierrc.js

module.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', // 当超出 print width（下面有这个参数）时就折行  
  endOfLine: 'lf', // 换行符应用 lf
  "max-lines-per-function": [2, { max: 320, skipComments: true, skipBlankLines: true}, ] // 每个函数最大行数
}

装置编译器 ESLint 插件
批改 vscode 配置

{
    "editor.formatOnSave": true, // 1
    "editor.codeActionsOnSave": {"source.fixAll.eslint": true},
    "eslint.format.enable": true
}

保留即可主动格局；如不失效；重启编译器～

关于前端:Vue3项目配置-eslint-prettier

介绍

装置依赖

配置文件

vscode 保留并主动格式化

完结