diff --git a/.gitattributes b/.gitattributes
index 142c29273f..d6e52a9f0c 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,3 +1,4 @@
+* text=auto eol=lf
 *.ts linguist-detectable=false
 *.css linguist-detectable=false
 *.scss linguist-detectable=false
diff --git a/.github/azure-pipelines.yml b/.github/azure-pipelines.yml
index f9692a90dc..105a9a18c3 100644
--- a/.github/azure-pipelines.yml
+++ b/.github/azure-pipelines.yml
@@ -15,50 +15,50 @@ variables:
   YARN_CACHE_FOLDER: $(Pipeline.Workspace)/.yarn
 
 stages:
-- stage: Preview
-  jobs:
-    - job: Build_Preview
-      steps:
-        - checkout: self
-          displayName: 'Checkout'
-          clean: true
-          fetchDepth: 1
-        - task: NodeTool@0
-          displayName: 'Install Node.js'
-          inputs:
-            versionSpec: '12.20.0'
-        - task: Cache@2
-          inputs:
-            key: 'yarn | "$(Agent.OS)" | yarn.lock'
-            restoreKeys: |
-              yarn | "$(Agent.OS)"
-              yarn
-            path: $(YARN_CACHE_FOLDER)
-          displayName: Cache Yarn packages
-        - script: yarn bootstrap
-          displayName: 'Project bootstrap'
-        - script: yarn website-build
-          displayName: 'Build website'
-        - script: |
-            export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-element-plus.surge.sh
-            echo "Deploy to $DEPLOY_DOMAIN"
-            npx surge --project ./website-dist --domain $DEPLOY_DOMAIN
-          displayName: 'Deploy Site'
-          env:
-            SURGE_LOGIN: $(SURGE_LOGIN)
-            SURGE_TOKEN: $(SURGE_TOKEN)
-        - script: |
-            export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-element-plus.surge.sh
-            curl -X POST ${BOT_URL} -H 'Content-Type:application/json' --data-raw '{"botAction":"Preview", "pr":'${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}', "url":"'${DEPLOY_DOMAIN}'"}'
-          displayName: 'Update PR comment'
-          env:
-            BOT_URL: $(BOT_URL)
-    - job: Build_Preview_Failed
-      dependsOn: Build_Preview
-      condition: failed()
-      steps:
-        - script: |
-            curl -X POST ${BOT_URL} -H 'Content-Type:application/json' --data-raw '{"status":"error", "botAction":"Preview", "pr":'${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}'}'
-          displayName: 'Update PR comment'
-          env:
-            BOT_URL: $(BOT_URL)
+  - stage: Preview
+    jobs:
+      - job: Build_Preview
+        steps:
+          - checkout: self
+            displayName: 'Checkout'
+            clean: true
+            fetchDepth: 1
+          - task: NodeTool@0
+            displayName: 'Install Node.js'
+            inputs:
+              versionSpec: '12.20.0'
+          - task: Cache@2
+            inputs:
+              key: 'yarn | "$(Agent.OS)" | yarn.lock'
+              restoreKeys: |
+                yarn | "$(Agent.OS)"
+                yarn
+              path: $(YARN_CACHE_FOLDER)
+            displayName: Cache Yarn packages
+          - script: yarn bootstrap
+            displayName: 'Project bootstrap'
+          - script: yarn website-build
+            displayName: 'Build website'
+          - script: |
+              export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-element-plus.surge.sh
+              echo "Deploy to $DEPLOY_DOMAIN"
+              npx surge --project ./website-dist --domain $DEPLOY_DOMAIN
+            displayName: 'Deploy Site'
+            env:
+              SURGE_LOGIN: $(SURGE_LOGIN)
+              SURGE_TOKEN: $(SURGE_TOKEN)
+          - script: |
+              export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-element-plus.surge.sh
+              curl -X POST ${BOT_URL} -H 'Content-Type:application/json' --data-raw '{"botAction":"Preview", "pr":'${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}', "url":"'${DEPLOY_DOMAIN}'"}'
+            displayName: 'Update PR comment'
+            env:
+              BOT_URL: $(BOT_URL)
+      - job: Build_Preview_Failed
+        dependsOn: Build_Preview
+        condition: failed()
+        steps:
+          - script: |
+              curl -X POST ${BOT_URL} -H 'Content-Type:application/json' --data-raw '{"status":"error", "botAction":"Preview", "pr":'${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}'}'
+            displayName: 'Update PR comment'
+            env:
+              BOT_URL: $(BOT_URL)
diff --git a/.prettierrc b/.prettierrc
index b3774a73a6..f4ccd33ba0 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,8 +1,12 @@
 {
-  "printWidth": 80,
-  "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
-  "endOfLine": "lf",
-  "trailingComma": "es5"
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
 }
diff --git a/package.json b/package.json
index 789cca95d0..e52dd0b367 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "build:utils": "cd packages/utils && yarn clean && yarn build",
     "build:tokens": "cd packages/tokens && yarn clean && yarn build",
     "build:full-bundle": "esno build/full-bundle.ts",
-    "format": "prettier --write '**/*.{vue,js,ts,jsx,tsx,scss,json,yaml,md,html}'",
-    "lint": "eslint ./packages --ext .vue,.js,.ts,.jsx,.tsx && prettier --check '**/*.{scss,json,yaml,md,html}'",
-    "lint:fix": "eslint --fix ./packages --ext .vue,.js,.ts,.jsx,.tsx && prettier --write '**/*.{scss,json,yaml,md,html}'",
+    "format": "prettier --write .",
+    "lint": "eslint ./packages --ext .vue,.js,.ts,.jsx,.tsx && prettier --check .",
+    "lint:fix": "eslint --fix ./packages --ext .vue,.js,.ts,.jsx,.tsx && prettier --write .",
     "website-build": "rimraf website-dist && cross-env NODE_ENV=production webpack --config ./website/webpack.config.js",
     "website-dev": "webpack-dev-server --config ./website/webpack.config.js",
     "website-dev:play": "cross-env PLAY_ENV=true yarn website-dev"
@@ -135,8 +135,11 @@
     }
   },
   "lint-staged": {
-    "*.{vue,js,ts,jsx,tsx}": "eslint --fix",
-    "*.{scss,json,yaml,md,html}": "prettier --write"
+    "*.{vue,js,ts,jsx,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{scss,css,json,yaml,yml,md,html}": "prettier --write"
   },
   "workspaces": [
     "packages/*"
diff --git a/packages/components/form/src/form-item.vue b/packages/components/form/src/form-item.vue
index 6eb23da7ea..f989b5253b 100644
--- a/packages/components/form/src/form-item.vue
+++ b/packages/components/form/src/form-item.vue
@@ -229,7 +229,9 @@ export default defineComponent({
         { firstFields: true },
         (errors, invalidFields) => {
           validateState.value = !errors ? 'success' : 'error'
-          validateMessage.value = errors ? errors[0].message || `${props.prop} is required` : ''
+          validateMessage.value = errors
+            ? errors[0].message || `${props.prop} is required`
+            : ''
           callback(validateMessage.value, invalidFields)
           elForm.emit?.(
             'validate',
diff --git a/website/assets/styles/fonts/style.css b/website/assets/styles/fonts/style.css
index 2e1570b076..89cf33c2c0 100755
--- a/website/assets/styles/fonts/style.css
+++ b/website/assets/styles/fonts/style.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('icomoon.eot?h6xgdm');
-  src:  url('icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
+  src: url('icomoon.eot?h6xgdm');
+  src: url('icomoon.eot?h6xgdm#iefix') format('embedded-opentype'),
     url('icomoon.ttf?h6xgdm') format('truetype'),
     url('icomoon.woff?h6xgdm') format('woff'),
     url('icomoon.svg?h6xgdm#icomoon') format('svg');
@@ -9,7 +9,8 @@
   font-style: normal;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^='icon-'],
+[class*=' icon-'] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
   speak: none;
@@ -25,15 +26,14 @@
 }
 
 .icon-rate-face-off:before {
-  content: "\e900";
+  content: '\e900';
 }
 .icon-rate-face-1:before {
-  content: "\e901";
+  content: '\e901';
 }
 .icon-rate-face-2:before {
-  content: "\e902";
+  content: '\e902';
 }
 .icon-rate-face-3:before {
-  content: "\e903";
+  content: '\e903';
 }
-