1. Recently, I took over the second project. The previous project was built based on vue + element + admin, an excellent background management platform. It was directly built by the company leaders. When I took over, I just did some simple business development. Recently, I took over a system written by an outsourcing company, which is based on Vue + ant_ The design + admin platform is basically the same except that the ant financial service is used to process the ui component library;
2. Problems encountered:
The vue + element + admin project will automatically format the code structure, including html and js, after saving the code, but the vue + ant + admin project will not automatically format.
3. Cause of problem:
Very simply, eslint is not effective in the new project, or the code under all src directories is ignored in a file. eslintignor corresponding to eslint, so there will be a problem that eslint is not effective and there is no prompt
4. Solution:
1, Here is the vscode tool. Download the relevant plug-ins, including ESLint, Vetur, Prettier,
ESLint: it's the coding specification. Each programmer's coding style may be different. At this time, it comes for unification!
Vetur: highlight the code so that the programmer can code quickly. It is the function of prompt, which can be used in perfect combination with eslint. There are many more details. Find them yourself;
Prettier: in fact, it is also a standard code format. After downloading this plug-in, there will be a. Pretierrc.js file. If not, you can create a. Pretierrc.js file in the root directory of the project, which contains some standard scripts.
2, After installing the above plug-in, create the file. eslintrc.js in the root directory of the project,
The contents of the file can be set as follows:
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
globals:{
'L':true
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/name-property-casing": ["error", "PascalCase"],
"vue/no-v-html": "off",
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
'camelcase': [0, {
'properties': 'always'
}],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
// 'eqeqeq': ["error", "always", {"null": "ignore"}],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 2, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 0,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'
}],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, {
'initialized': 'never'
}],
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}],
'semi': [2, 'never'],
'semi-spacing': [2, {
'before': false,
'after': true
}],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never']
}
}
You will find that there is also an eslintignor file in the root directory. This file is used to set which files can not be detected by eslint. The eslintignor file here is as follows:
# /src build/*.js node_modules src/assets public dist src/mixin
Meanwhile, the configuration items of vscode are set as follows:
How do I get into settings.json?
You can enter the settings.json file by finding any one of the file preferences settings (edited in settings.json)
{
"extensions.ignoreRecommendations": false,
"team.showWelcomeMessage": false,
"git.enableSmartCommit": true,
"vsicons.dontShowNewVersionMessage": true,
"git.autofetch": true,
"react.beautify.onSave": true,
"files.associations": {
"*.js": "javascript"
},
"git.confirmSync": false,
"explorer.confirmDelete": false,
"[markdown]": {},
"eslint.enable": true,
"eslint.options": {
"extensions": [
".js",
".jsx",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"vetur.validation.template": false,
"eslint.autoFixOnSave": true,
"editor.tabSize": 2,
// "jest.autoEnable": false,
// "jest.pathToConfig": "./.jest.js",
// "terminal.integrated.rendererType": "dom",
"window.zoomLevel": 0,
"editor.quickSuggestions": {
"strings": true
},
"diffEditor.renderSideBySide": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.fontSize": 18
}After saving here, it will basically take effect. After saving the html and js code, you will install the rules you set for formatting. If not, restart vscode and try again
The above is the summary of my personal exploration. If there is anything wrong, please correct it!